Jump to content
Sign in to follow this  
JasonLA

Universal sidebar vs Full Width sidebar: CSS to only change one or the other?

Recommended Posts

JasonLA

Super quick question: 

 

In changing the css for my site, I noticed 

 

 

.widget .widget-pad {
    floatright;
}

 

changes the float of both my Universal Sidebar and my Full Width. How do I make it only apply to one and not the other? Is there specific names for each sidebar in css?

Thanks

Jason

 

 

Site: zoxstraps.com

 

Note the jigoshop mini cart at the top is on the right, as is the mailchimp signup at the bottom. Would like Mailchimp to be on the left. 

 

Share this post


Link to post
Share on other sites
Rob

Hi Jason,

 

It's actually easier to align the content within the widget, than to align the widget itself.  I'm sure that sounds cryptic so let me explain.

 

You can wrap your text widget content in a div containing a unique class. Something like

<div class="myuniqueclass">your content</div>

You just have to use a unique term, not likely to be copied elsewhere in some plugin.

 

Next, you create custom CSS for that class like this:

.myuniqueclass {float: right;
position: relative;
}

I hope this helps. Keep us posted!

.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
JasonLA

Thanks Rob! 
Could you help me in figuring out where to place that wrap in the regards to the mailchimp plugin? I have no clue how to do any php so that first line of code you posted doesn't really make sense to me. 

 

Thanks!

Share this post


Link to post
Share on other sites
Rob

Unfortunately, I can't assist with Mailchimp code.  Whatever code you have would replace where I wrote your content.  So, the <div... is placed at the beginning, and the </div> is placed at the end of your Mailchimp code.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
JasonLA

Hi Rob, 

By mailchimp code/ text widget, do you mean the plugin file? I just tried adding <div class="mailchimp"> and </div>

 

at the top and bottom of the plugin file (mailchimp-widget/mailchimp-widget.php), then added the code: 

 

.mailchimp {float: left;

position: relative;
}
 
to my custom css file. 
 
This made multiple different areas on my site increase their padding, but did not move the mailchimp plugin to the left side. I'd like to understand what you mean here so I can utilize this with multiple different plugins. 
 
Thanks!
Jason

 

Share this post


Link to post
Share on other sites
Danny

Hi Jason,

 

There is no need to edit the plugins file and add a custom div, as all widgets are given a unique ID or class already. Which you can use to style your widgets on an individual basis.

 

I recommend using Firebug or your browsers built-in web dev tools and inspect the widget(s) to find the correct code. For assistance visit our custom CSS documentation - http://support.pagelines.me/docs/customization/custom-css/


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×