Archived

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

  • 0

One easy and one hard css question

Question

Posted · Report post

Easy ?

 

How do I change the padding for only the tag-cloud-2 widget (I want there to be less space above "Site Resources" on the right sidebar.

 

http://www.philosophymuse.com/highlights/

 

Hard ?

 

On the same page, how do I get rid of the "flex-control-nav" (the small circles below the slider)?

 

Also, does anyone else see maybe a one or two pixel white space between the slide and the menus? It is apparent especially with some of the slides. How can I fix that??

 

Thanks a million!!!

 

-Reid

Share this post


Link to post
Share on other sites

5 answers to this question

Posted · Report post

Hi Reid,

 

I grabbed this directly from your site using Firebug:

 

#tag_cloud-2 .widget-title {
    font-size: 21px;
    font-weight: normal;
    text-align: center;
}
.widget .widget-title {
    color: black;
    font-size: 14px;
    margin-bottom: 0.6em;
    padding: 3px 8px 3px 0;
    text-align: center;
}

As you can see, the widget title has a margin-bottom of 0.6em and padding as well.  If you change those, as Danny said, you'll do so globally, however, I think you can prefix a modified copy of the 2nd group with #tag_cloud-2.  From all I see, it's that one component, the title, which has added space between the title and the tags.

Share this post


Link to post
Share on other sites

Posted · Report post

#sb_secondary has a top margin, so you can remove that as well to bump up the entire sidebar.

 

If you want to get rid of the .flex-control-nav, just set it to display:none;

Share this post


Link to post
Share on other sites

Posted · Report post

Hi Reid,

 

 

Unfortunately, we are unable to provide you the custom CSS needed to achieve your layout. Therefore, I recommend using Firebug or your browsers built-in web dev tools and inspect the widget to find the correct code.

 

For assistance visit our custom CSS documentation - http://support.pagelines.me/docs/customization/custom-css/

 

Regarding the navigation for your slider, you can configure the slider using the options to only use arrow navigation. Simply go to Wordpress Admin Dashboard > Pages > Select the page that you have the slider active on. Then scroll down to the PageLines Meta Settings and select the QuickSlider, then configure the setting for Slider Navigation mode 

Share this post


Link to post
Share on other sites

Posted · Report post

Ninja,

 

Thanks. I have tried those resources, and have tried many combinations trying to achieve my layout.

 

Firebug is actually my tool of choice.

 

If I try the

 

.widget .widget-pad {
    padding0;
}
 

Then it obviously changes it everywhere. However, I only want to change it on the one widget. I have tried many different combinations of

 

.tag_cloud-2 {

    padding0;
}
 
.widget .widget-pad .tag_cloud-2{
    padding0;
}
 
etc. but none of them are working.
 
In addition, for the second question:
 
I have entered in
.two-sidebar-center #column-main .mcolumn-pad {
padding-right: 0px;
padding-top: 0px;
padding-left: 0px;
}
 
but there still seems to be maybe 1 or 2 pxs in between. Can you see this or help me?
 
Thanks!!

Share this post


Link to post
Share on other sites

Posted · Report post

Using

 

.widget-pad {}

 

is like you said going to change it for all widgets. This is why you need to inspect your CSS using Firebug or your browsers web dev tools. When you inspect your code, you can see that all widgets are given either a unique ID/class or both.

 

In terms of the cloud widget it has both a unique ID and class, you can then use the ID or class infront of the widget-pad {} code and thus only change the cloud widget.

 

For example (please remember this is an example and will probably not work)

 

 

.widget_tag_cloud .widget-pad { padding: 0; }

 

You do not need to use CSS to remove the circle navigation, there is a QuickSlider option for it, see my image.

 

http://cl.ly/image/271u2n3T3e0s

Share this post


Link to post
Share on other sites