Hi again Vlad,

I’ve just realised that the problem you have with the Column Text editor not working (in Chrome, Firefox or Safari) is (visually at least) very similar to the problem I’m having with the PayPal button and the Checkout page – with a pop-up window not working and an endless spinning wheel running rather than a connection being made.

Just wondered if this might help you diagnose the problem?

Cheers
Rich

Hi there,

Yep, I’ve tried that and it works fine when not using Newspaper. The button works fine when it’s not Newspaper and the Checkout page looks fine when it’s not Newspaper. So everything is configured correctly.

Rich

Hey bzeegers,

Did you find a solution to this? I was fine until today and now I have the same problem?

Thanks
Rich

Hey Vlad,

Think I’ve found a fix to this. If I style all the links in the menu like this:

/* Talent Dev menu items */
.menu-item-671,
.menu-item-644,
.menu-item-643,
.menu-item-642,
.menu-item-641,
.menu-item-640,
.menu-item-639,
.menu-item-638, {
background-color: #43b3e7;
padding-top:5px;
padding-bottom:3px;
padding-left:7px;
padding-right:7px;
margin:5px;
}

And then I can target the page and link I want to change the background to like this:

/* Projects To Inspire Page */
.talent-development-projects-to-inspire
#menu-item-638 {
background-color: #008cb9 !important;
}

So using that page class of .talent-development-projects-to-inspire targets that one menu item on that one page.

Still can’t change the text color though!

Cheers,
Rich

Hi again Vlad,

This might have been me being stupid, but I’ve just realised that the CSS panel that you can pull-up on an individual page in the Composer isn’t actually for that page… it’s site wide.

I really, really need the follow CSS to be adjustable for specific pages:

.menu-item-644,
.menu-item-643,
.menu-item-642,
.menu-item-641,
.menu-item-640,
.menu-item-639,
.menu-item-638,{
background-color: #43b3e7;
padding-top:3px;
padding-bottom:3px;
padding-left:5px;
padding-right:5px;
margin:5px;

}
.menu-item-656 {
padding-top:3px;
padding-bottom:3px;
padding-left:5px;
padding-right:5px;
margin:5px;
border-style:solid;
border-color:#999999;
border-width:1px;
}

How would I do that using Page IDs or something else?

Thanks
Rich

Thanks for that Vlad,

I’ll have to leave it for now and just set all the text to black as I have to get on with it. But once I have everything in place I’ll email you about it again and we’ll see what we can do.

Thanks for your help though.

Cheers,
Rich

Thanks Vlad,

Yep that changes the background color. But I want that background color to be white, and the text to be black on every active page in that list. With the others in the list being the blue boxes with white text.

It seems so odd that I can change anything to do with those links expect this for the text:

.menu-item-671 {
color: black;
}

Doesn’t seem to work even with an !important in the CSS.

Tricky, eh?

Rich

Hi Vlad, thanks for that. It’s:

http://humbucker.co.uk/talent-development-overview/

When you get there Angelo is the word to put in the box!

Had a quick look and I can’t see that I have a background color set all on that box. Anyway, hope you find an answer.

Cheers,
Rich

Thanks Vlad,

Yep, that allows me to set a hover state for the links, but it’s the active link that I really want to get at.

Also, it looks like I may have sent you the wrong screenshot. Sorry! This should be the correct one:

https://prnt.sc/olxetl

As you can see, I can target the CSS for all the links and put them in nice blue boxes etc, but it’s the first one on this list that I just can’t get to. It’s the active page and in that box (a box I can style just the same as the others) should be the word ‘Overview’ in black text. The text is there and shows up on hover but I can’t change it independently of the others. I’d also rather it didn’t hover or link at all on the active page. Is there a way of removing the ‘Overview’ link but still keeping the word ‘Overview’ there? Would be kind of easy in HTML, just need the first item in the list to not be a link. Off the top of my head something like:

• Overview
• Gallery
• National Youth Dance Company of Scotland
• Project Y Performance Course

But thanks again, I’m sure we’ll work something out!

R

Hi Vlad,

I have another question regarding Styling the List Menu… I decided to change what I had going above and stick with a more preformatted look.

I’ve been trying to style this but have a hit a problem with the hover and active states of the links. If you look at the CSS you’ll see I’ve targeted each menu item but with a different look for the active page, in this case Overview (menu-item-656).

I can adjust the CSS so that a:link and a:visited change colour, but not a:hover or a:active. Any ideas?

Here’s the CSS:

.menu-item-644,
.menu-item-643,
.menu-item-642,
.menu-item-641,
.menu-item-640,
.menu-item-639,
.menu-item-638,{
background-color: #43b3e7;
padding-top:3px;
padding-bottom:3px;
padding-left:5px;
padding-right:5px;
margin:5px;

}
.menu-item-656 {
padding-top:3px;
padding-bottom:3px;
padding-left:5px;
padding-right:5px;
margin:5px;
border-style:solid;
border-color:#999999;
border-width:1px;
}

a:link {
color: white;
}
/* visited link */
a:visited {
color: red;
}
/* mouse over link */
a:hover {
color: black;
}
/* selected link */
a:active {
color: black;
}

And here’s a screen shot:

https://prnt.sc/ofrts1

So with the above example, it hovers over in red (not black as stated in the CSS) and the active page is red (not black as stated in the CSS).

Cheers!
Rich

Nice one Scott,

That was a LOT easier than my mad suggestion!

Cheers,
Rich

Hey Vlad,

Thanks for that. It didn’t work straight off, but after inspecting the element a bit I tried just targeting the block and the ul:

.td_block_list_menu ul {
margin-top: -45px;
}

And that seems to work. So thanks for pointing me in the right direction!

Rich

Hi everyone,

Not sure if this helps (and it’s certainly not the easy solution we’re all after), but here’s one way to delete those annoying empty columns that hang around in the TagDiv Composer.

Apologies in advance to all those out there who are far more advanced than me; I’m sure you probably already have this nailed and my explanation might not earn any marks for ‘technical writing’, but here goes…

The first thing to mention is that the words ‘Empty Column’ are slightly misleading, as a Column sits inside a Row – and so it’s usually the Row you want to target and not just the Empty Column inside of it. As clear as mud, eh?

Anyway, basically it’s a case of getting out of the TagDiv Composer, jumping into the old school Page Edit screen, and identifying in all that code where the empty rows / columns are and then deleting them from there.

So, if you’re using the TagDiv Composer and you put a new Row into your page, set it to stretch the the content, add a Text Column to it, put some text in (a sentence of Lorem ipsum in this case), hit save, it’ll look something like this when you look at the code on the Page Edit screen:

[vc_row full_width=”stretch_row_content td-stretch-content”][vc_column][vc_column_text] Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.[/vc_column_text][/vc_column][/vc_row]

And here’s the same thing but without the Text Column and actual text – the kind of thing that appears as an undeletable Empty Column in the TagDic Editor:

[vc_row full_width=”stretch_row_content td-stretch-content”][vc_column][/vc_column][/vc_row]

Apologies again to the hardcore users out there but I’m going to break that down in my own simple way so we all know what we’re looking at:

[vc_row full_width=”stretch_row_content td-stretch-content”] – (This opens the Row and stretches the content)
[vc_column] – (This opens the Column that sits inside the Row)
[vc_column_text] – (This opens the Text Column that sits inside the Column that sits inside the Row)
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. – (This is your text)
[/vc_column_text] – (This closes the Text Column that sits inside the Column that sits inside the Row)
[/vc_column] – (This closes the Column that sits inside the Row)
[/vc_row] – (This closes the Row)

And in the second example (the one without any Text or Text Column):

[vc_row full_width=”stretch_row_content td-stretch-content”] – (This opens the Row and stretches the content)
[vc_column] – (This opens the Column that sits inside the Row)
– (There’s nothing to see here, please move along…)
[/vc_column] – (This closes the Column that sits inside the Row)
[/vc_row] – (This closes the Row)

So, if you wanted to delete both of these so they no longer show up in the TagDiv Composer you’d have to delete all of the above.

At its most basic, if you spot [vc_row] [vc_column] [/vc_column] [/vc_row] in your code then that’s an empty Column / Row and (if you wish) you can delete it.

Needless to say, go careful with this. Because if you accidentally highlight a stray open or closed bracket and hit the delete button then you could be in all sorts of trouble. Probably best to add a Column that you know you don’t want and then have a go deleting that.

I’ve found that adding a text box and some text to an Empty Column actually makes it easier to distinguish in the code, so that’s not a bad idea.

Well, I hope that helps. As I said before, a big ‘Delete Empty Column’ button in the TagDiv Composer would be the best thing by far, it looks like it used to exist but I’ve only been using this theme for a couple of weeks so I guess I missed out – so until that comes back I’m sticking with this.

Even though it’s a total pain the arse.

Cheers,
Rich

PS: And if you feel in any way uncomfortable about doing this, then (as mentioned before by a few people) you can use the CSS tab on the Empty element to set the visibilty to ‘hidden’. It won’t remove it from the code but it will hide it from the Composer.

Hey Vlad,

Sorry, should have done that first time around… here’s an image:

https://prnt.sc/ofrts1

On the top is how I have a List Menu styled at the moment. And on the bottom is how they appear when on a Category or Post box, with the links above the red line and not below.

What I’d like is to be able to do that with the List Menu, put the links above the line and not below.

Cheers,
Rich

Hi Vlad,

Thanks for that, awesome!

R

Hi Vlad, hi Daniel,

Sorry if this is obvious, but if I wanted to change the word ‘All’ to something else, where would I do that?

Thanks!