Various Issues Including the Accordion element and the Accent line for the Headings!

Support
#1

Hi, I’m working on a website and have a few issues that I can’t resolve myself - I have tried! I hope you can help!

I’m just working on the Home page for now:

  1. The nav bar - when you hover over a page name, a line under it appears, how can I change the thickness of it and add padding to move it further away from the text

  2. The icon list in the section ‘Why have a website?’, when I view it on a smartphone there’s a gab under each column that I can’t get rid of - I’ve tried different CSS options but it just won’t go!

  3. The accordion, when clicked on I need to change the transparent background to white. I’ve tried several ways to do this with CSS but nothing seems to work! Here’s the basis CSS I’ve tried:

.x-accordion-inner {
  background-color: #fff;
}

.x-accordion-body.collapse.in {
  background-color: #fff;
}

I’ve tried both CSS above with and without ‘div’ at the beginning and also with and without ‘important!’ added to the background color - and I’ve also tried it with the ‘color’ removed from the background line.

  1. The ‘accent’ line either side of the headings, how can I change the colour and thickness of it.

I’ll add the details for the site in a private message as I need to include the password to view it.

Thanks!

#2

Hi There,

1.) Try this custom CSS:

.x-navbar .desktop .x-nav>li>a>span {
    padding: 0 0 15px; /*Adjusrt 15px to your preferred space*/
}

.x-navbar .desktop .x-nav > li > a:hover > span, .x-navbar .desktop .x-nav > li.x-active > a > span, .x-navbar .desktop .x-nav > li.current-menu-item > a > span {
    box-shadow: 0 2px 0 0 #be1522; /*Adjusr 2px to your preferred thickness*/
}

2.) That is default bottom GAP per icon element try this CSS:

@media (max-width:767px){
   .home ul.x-ul-icons {
    margin-bottom: 0;
}

3.Try this:

.home .x-accordion-inner {
    background: #ffffff;
}

Although, what you tried above should work too. Reasons that it might not work might be CSS specificity or syntax error. Make sure that all open { has corresponding closing }. In case some of that suggested CSS did not work, just add it on your Global CSS and leave and let us know so we can check where the error is coming from.

Hope this helps.

#3

Hi Lely

Thanks for your help! I can’t understand why the CSS suddenly isn’t working for me, as I’ve done quite a few sites before and always managed to change it to how I want! Could something have changed during an update to Cornerstone?

Most of the CSS worked, it was just point 2 that didn’t - there’s also a few more issues I have that Ive added to the list below:

Home Page

  1. Worked brilliant, thanks!

  2. I’ve added in the CSS, but unfortunately there’s still a gap which shows at the end of each column - I have no idea why as no padding or margins have been set. I’ve tried the class ‘man’ and adding in padding: 0px and margin: 0px but nothing seems to work! I’ve attached a screen grab to show the gaps.

  3. Worked brilliant, thanks!

  4. The ‘accent’ line either side of the headings, how can I change the colour and thickness of it.

  5. When you hover over the page names in the nav bar, how can I change the styling for the sub menu?

  6. The ‘It’s Good to Talk’ section near bottom of page - when viewed on a smart phone, is it possible to split the ’Telephone number’, ‘Email us’, ‘Live chat’ and ‘Fill in enquiry form’ onto separate lines instead of flowing over and half of it being one one line then the other half being on another. I’ve attached a screen grab to show how it displays at the moment.

Website Packages Page
http://websites4campsitesuk.co.uk/website-packages/

  1. I’ve used a pricing table and added in some text and extra lines below the icons. Can you let me know the following please as I’ve tried to change the CSS but again nothing seems to work for me!
  • How can I change the colour and font size of the prices?
  • How can I change the green uppercase text to lower case?
  • The lines of text I’ve added in go too close to the edge of the table, how can I add in padding to just the text without it adding it to the lines?
  • How can I change the colour of the black text, I can’t do it with the ‘style’ command as it just displays it as text on the front end
  • How can I change the colour of the grey background behind the ‘Premium Most Popular’ heading?
  • It looks like the 1st and 3rd columns have a light grey background colour, how can I change it?

Thanks!

#4

Hi There,

Please check your entire custom CSS here (http://csslint.net/) first. And resolve all the found errors, the custom CSS you have (and Lely’s CSS) might be correct but did not work because of those syntax errors.

Resolve this syntax error first and see what issues have been address and what is not.

Thanks,

#5

Hi Friech

Thanks for the link to CSS Lint, it just flagged up 1 error which was an extra } so when I got rid of that, I was able to add in CSS to most of what it wasn’t letting me before! I’ll bookmark that link, it’s very useful thanks!

There’s just a couple of things I still can’t sort myself:

  1. When you hover over the page names in the nav bar, how can I change the styling for the sub menu? I can’t find the tag as when I hover over it to try to inspect it, it disappears and when I change the state to ‘hover’ or ‘active’ it still doesn’t come up with the tag!

  2. The ‘It’s Good to Talk’ section near bottom of page - when viewed on a smart phone, is it possible to split the ’Telephone number’, ‘Email us’, ‘Live chat’ and ‘Fill in enquiry form’ onto separate lines instead of flowing over and half of it being one one line then the other half being on another. I’ve attached a screen grab to show how it displays at the moment.

Thanks!

#6

Hi There,

  1. That would be tricky since you did not wrap each contact info and its corresponding icon in one tag. Normally we can stack everything in mobile with the custom CSS below:
@media (max-width: 767px) {
	.page-id-17 #x-section-7 .x-container .x-1-1 a {
		display: block;
	}
}

However, as you can see the icon gets stacked as well. Please wrap each contact info and its corresponding icon in a span tag with class:

e.g.

<span class="your-class">CONTENT HERE</span>
  1. Inspect those menu item with a child item and then manually add a class x-active to it, and you’ll see the sub-menu will show up without hovering its parent menu.

You can use this selectors below to style your sub-menu items.

/* non-active sub-menu items */
.x-navbar .desktop .sub-menu li > a {
	color: blue;
}

/* active sub-menu items */
.x-navbar .desktop .sub-menu li.current-menu-item > a {
	color: green;
}

/* hovered sub-menu items */
.x-navbar .desktop .sub-menu li > a:hover {
	color: magenta;
}

Thanks!

#7

Hi, that’s great, thanks! However, I’m not sure how to use the span class so it displays how I want it to with the specific colours I want, to replicate it exactly how I have it now! I’ve tried to do it, but the text is all grey and it doesn’t link for me. This is the code I’m using which displays the line of text and icons exactly how I want and I don’t know how to put it within the span class so it looks the same!

<font color="#0081c5"><i class="x-icon x-icon-phone" data-x-icon="" aria-hidden="true"></i></font> <a href="tel:02476601351"><font color="#585757">024 7660 1351</font></a>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#0081c5"><i class="x-icon x-icon-envelope" data-x-icon="" aria-hidden="true"></i></font> <a href="mailto:info@websites4campsitesuk.co.uk"><font color="#585757">Email us ></font></a></font>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#0081c5"><i class="x-icon x-icon-commenting" data-x-icon="" aria-hidden="true"></i></font> <a href="http://pplevents.com/contact-us/"><font color="#585757">Live chat ></a></font>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#0081c5"><i class="x-icon x-icon-pencil" data-x-icon="" aria-hidden="true"></i></font> <a href="http://pplevents.com/contact-us/"><font color="#585757">Fill in enquiry form ></a></font>

Thanks!

#8

Hi There,

Now that I see your code, a simple <span> tag would not work anymore. You’re wrapping your content with <font> tag to much just to color it, On top of that <font> tag is Not Supported in HTML5, please refrain from using that tag.

Another thing I see that you place this html code inside a Custom Headline element, that element is not meant for this type of content, please use the RAW content element or Text element instead.

You can use this html markup instead, place it on a RAW content element.

<ul class="good-talk man">
	<li>
		<i class="x-icon x-icon-phone" data-x-icon=""></i>
		<a href="tel:02476601351">024 7660 1351</a>
		<i class="x-icon x-icon-chevron-right" data-x-icon="&#xf054;" aria-hidden="true"></i>
	</li>
	<li>
		<i class="x-icon x-icon-envelope" data-x-icon=""></i>
		<a href="mailto:info@websites4campsitesuk.co.uk">Email us</a>
		<i class="x-icon x-icon-chevron-right" data-x-icon="&#xf054;" aria-hidden="true"></i>
	</li>
	<li>
		<i class="x-icon x-icon-commenting" data-x-icon=""></i>
		<a href="http://pplevents.com/contact-us/">Live chat</a>
		<i class="x-icon x-icon-chevron-right" data-x-icon="&#xf054;" aria-hidden="true"></i>
	</li>
	<li>
		<i class="x-icon x-icon-pencil" data-x-icon=""></i>
		<a href="http://pplevents.com/contact-us/">Fill in enquiry form</a>
	</li>
</ul>

Then add this on your page CSS

ul.good-talk li {
	position: relative;
	font-size: 150%;
	list-style-type: none;
	float: left;
	width: 25%;
}

ul.good-talk li i {color: #0081c5;}
ul.good-talk li i.x-icon-chevron-right {
	float: right;
	margin-right: 20%;
}
ul.good-talk li a {
	color: #585757;
	padding-left: 2%;
}

@media (max-width: 1024px) {
	ul.good-talk li {float: none;width: 100%;}
	ul.good-talk li i.x-icon-chevron-right {display: none;}
}

Hope that helps, because further customization from here would fall outside of the scope of the support that we can offer.

Cheers!

#9

Hi Friech

That’s great, thanks! Much appreciated! The only thing is the text for ‘Fill in enquiry form’ is split over 2 lines and the chevron is on the 2nd line and over to the left side of the screen. I’ve adjusted the percentages for the widths in the CSS but it still doesn’t correct it - I’ve tried removing them too but the text and chevron is still split onto the 2nd line. I’ve uploaded a screen grab for you to see.

Thanks!

#10

Howdy, @core365,

If the text is wrapping onto a second line, that is because the text is longer than the container that is holding it. You will either need to adjust the font font-size of the text to make it smaller and fit within the container’s width on that screen size, or you will need to alter your copy to have shorter words and/or phrasing that fits within the container if you do not wish to alter the font-size.

Cheers!

#11

Hi, thanks, but no matter how much I make the font size smaller, the chevron that’s supposed to be to the right of ‘Fill in enquiry form’ stays on the second line and even disappears, so I have no idea what’s going on with it!
If you refer to the screen grab on my previous post, the chevron that’s currently under the telephone number should be at the end of ‘Fill in enquiry form’ and even if the font needs to go smaller, the chevron should still be at the end of ‘form’ shouldn’t it?

Thanks

#12

Hi There,

Your font-size is too large, please resize that accordingly. Try font-size: 100%;

Keep the width: 25%; because that is the only way to divide the 4 items equally.

Please clarify where should the chevrons be position.

And if you can re-phrase the “Fill in enquiry form” in a single word or two that would help.

Thanks,

#13

Hi, I originally wanted it to replicate how I had it, but to just have each contact detail on a separate line. Reducing the text to 100% is just way too small and looks ridiculous - please see attached screen grab. I shouldn’t really have to change the 4 words ‘Fill in enquiry form’ to 1 or 2 words, as the 4 words aren’t excessive in the first place! I’m going to put it back to how I did it myself, as I’m spending way too much time on this and not getting anywhere. I appreciate the help given, but it would have been better if it was just said that it wasn’t achievable from the beginning to save everyones time.

Cheers

#14

Hi There,

Sorry if you feel that way as a lot of work was put into this, we just want to help. I did say Try font-size: 100%;, but I also said to please resize that accordingly

I did check again what you have now, so the chevron must be next to the text and not in the middle. If you can try again and put back the suggested HTML and CSS code. Put it in RAW content element just below what you have now so you can compare it.

On the CSS code remove this:

ul.good-talk li i.x-icon-chevron-right {
	float: right;
	margin-right: 20%;
}

That is the code that position the chevron.

To add a chevron next to the “Fill in enquiry form”, add this line

<i class="x-icon x-icon-chevron-right" data-x-icon="&#xf054;" aria-hidden="true"></i>

Below this line:

<a href="http://pplevents.com/contact-us/">Fill in enquiry form</a>

If this does not work still, then that means this will require a customization atleast on what you’re trying to do.

Wish you all the best!