Jump to content

Archived

This topic is now archived and is closed to further replies.

nfp1900

widgetizer and styling classes

Recommended Posts

nfp1900

It's been relatively easy to style the titles etc for widgets placed in the primary sidebar. But when I use the widgetizer with custom sidebars I'm having a real issue tracking down the CSS to make any changes to the titles. 

 

I could go back to using the primary sidebar  and widget controller but I like the widgetizer/custom sidebar selection method. 

 

On the homepage the Latest News is a flipper section (found the CSS for that) then the video/events widgets sit in widgetizer with a custom 'sidebar-homepage'. They  should have titles like the primary sidebar I dropped in for illustration purposes underneath. 

 

I gave the widgetizer a class but it then centred all the copy and made the background green - I just need the titles!

 

http://nicholaspealldesign1.com.gridhosted.co.uk/

 

The ID I'm showing here is likely incorrect but i couldn't find the right one...

 

.homepage-widget .list_cs-homepage-sidebar {
    background-color: #009089;
border-radius: 3px;
border-style:solid;
border-color: black;
  border-width:0px;
  text-align: center;
color: #ffffff;}

 

 

Share this post


Link to post
Share on other sites
Danny

Hi,

 

All sections are given a unique ID and class.

 

For the widgetizer this is:

 .section-widgetizer

 

So you can use this to style the widgetizer seciton, if you sidebar titles are a h1, h2, h3 etc.. then you can use these along with the  .section-widgetizer to style them.

 

For example.

 .section-widgetizer h3 { color: red; }

 

http://cl.ly/image/25132s3Z1h2b


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
nfp1900

Hi Danny

 

What it does with the h3 tag is turn all the titles in the widget to the solid green, even those for the events when I just need the headings to be centred with the green background. I saw a comment that with the nested LESS it's even harder to find the right class which is proving to be a problem. 

 

With the flipper section I have .flipper-heading .flipper-title and that works but for 

 .section-widgetizer  I can't find the class which identifies just the title. This works for the primary sidebar:

 

.widget .widget-title,  .widget .widgettitle {
  background-color: #009089;
border-radius: 3px;
border-style:solid;
border-color: black;
  border-width:0px;
text-align: center;
color: #ffffff;}
 
 

 

The class  .section-widgetizer is also changing the revolution slider because that's sitting in a widget. 

 

Thanks

Share this post


Link to post
Share on other sites
Rob

I don't believe the slider belongs in a widget. 


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
nfp1900

It's the paid version of Rev slider from the same developer as the watered down free section (which is just far too large for most sites). They produce a widget as part of the plugin so it works fine. Another user on the site commented about the good experience and it's worth the $15 given the range of functionality.

Share this post


Link to post
Share on other sites
Danny

Hi,

 

Is the issue regarding your widgetized headings resolved? I have just visited your website and it appears to be the case.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
nfp1900

Hi Danny

 

It's fine when I'm using the primary sidebar - and I managed it with flipper but it's still an issue with widgetizer. 

 

I added a widgetizer to the bottom of the page, added the custom sidebar and then a text widget with the title 'newsletter download' as an example. I will admit I'm finding the Chrome dev tool a bit of a bugger to use (maybe a tutorial would be good) but with firebug I can pull out this:

 

<section id="widgetizer2kcw51" class="pl-section span12 offset0 section-widgetizer" data-clone="2kcw51" data-sid="widgetizer" data-object="PageLinesWidgetizer">

 

I just need to know how to identify the right bits to style this title then I'll be ok with the rest...

Thanks

Share this post


Link to post
Share on other sites
Danny

You're using the Widgetized section, this means that you have utilise the widgetized sections class.

 

.section-widgetizer

 

Now you need to find what header tag your widgets in the widgetizer section are using, for example if they are using the H4 tag, to target them you would use the following code:

 

.section-widgetizer h4 { color: green; background-color: pink; font-size: 3000px; }

 

You will need to change the h4 tag to match the header tag that your widget titles are using.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
nfp1900

I can't get .section-widgetizer h4 to do anything, even changing the tags and refreshing. Creating a custom class for the widget does work. 

Share this post


Link to post
Share on other sites
Danny

Where exactly on your page is the widgetizer you want to customise and what do you want to customize?

As you have me confused, I am not sure what you mean by changing tags. The code I gave you was an example, you need to inspect the element you want to customize and apply custom css to that element.

 

From what I can see you have two widgetized sections on your template, one housing the RevSlider and the other which has plain text saying "Newsletter download". This Newsletter download isn't wrapped around any HTML tags, so regardless of what tag you add to your code, it wont work as there is no HTML tag to target.

 

The Newsletter download text is coming from a widget called List_cs_homepage-sidebar, I have no idea what what widget it. But if you use the following code, it will make the Newsletter text green, give it a pink background, padding of 20px and a font size of 24px.

 

#list_cs-homepage-sidebar {
color: #008000;
background-color: #FFC0CB;
padding: 20px;
font-size: 24px;
}
 
If you use this widget often and only want to style it for the widgetized section, you will need to prefix the code above using the .section-widgetizer class, like so.
 
.section-widgetizer #list_cs-homepage-sidebar {}

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
nfp1900

It's nothing crazy, just a text widget dropped into a custom sidebar using the widgetizer section (the text widget is just an example).

 

So the id #list_cs-homepage-sidebar works to style the whole widget (and I found the id for others) but I can't isolate just the title to apply the style so it matches those in the primary sidebar.

Share this post


Link to post
Share on other sites
mobilenow

I second what nfp is saying. The title in widgetizer is not isolated into it's own class, so we aren't able to customize it's appearance. ".widgettitle" was easy to customize in v2, and we were able to isolate it and change the font and background, etc. If you examine a widgeetizer section with firebug, you'll see that the title can't even be selected by firebug by itself (it selects the entire box), which implies that it's all lumped into the same thing and makes it impossible to edit. I think this is something that warrants a closer look by Simon or AP. :)

Share this post


Link to post
Share on other sites

×