Jump to content
Sign in to follow this  
evannis

Best Way to Customize Sidebar

Recommended Posts

evannis

I'm not too thrilled with the sidebar on my page. I am wondering what the best way is to customize the sidebar so it doesn't look so wonky. Please share your suggestions. Would love to hear what has worked for you. Would love something with nicer header images that fit the image size I would like to use. Thanks! http://66.147.244.152/~rozanneg/ Evan

Share this post


Link to post
Share on other sites
catrina

It's possible to customize the look of your sidebars using CSS (for example, changing the widget title color, font, size, background color, etc.). Is that something you want to do?


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
evannis

Hi Catrina, Is that easy to do without knowledge of CSS?

Share this post


Link to post
Share on other sites
evannis

Is it possible to find sidebar CSS codes somewhere that I can use to edit the current one? If so, how do I go about that? Thanks!

Share this post


Link to post
Share on other sites
catrina

It's easy to implement without doing too much work. I can show you one example and if it sounds like a customization you want in your sidebar, I can show you how to use it. Here's one example for changing the widget title color: Each widget title in your sidebar is classified by the name h3.widget-title. This distinguishes the widget titles from all other types of info on the page (such as the post titles, navigation menu item links, etc.). To change the color of the widget title, it will require this CSS:

h3.widget-title {color: #000000;}
Note the placement of the class name "h3.widget-title" before the styling. #000000 is the hex code color for black. This piece of CSS changes the widget title to black (instead of the grey color that it is now). This code needs to be placed in the custom code area in your settings. Here's an example of another change made to the widget titles:
h3.widget-title {size: 18px;}

The same class name is used since we're still adjusting the widget titles. This time, the widget title's size is changed to 18px (a slightly larger size than the current one). That's the gist of how CSS works. Does that make sense so far? *EDIT* I just saw your last post about where to find the sidebar CSS. You can easily find CSS using Firebug for Firefox: http://getfirebug.com/ Here's a tutorial on how to use it for CSS customization: http://www.pagelines.com/docs/customization#101


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
evannis

Makes sense so far...what if I want to use an image for the widget titles?

Share this post


Link to post
Share on other sites
evannis

Can you tell me what file I should be looking in to find the CSS code for this?

Share this post


Link to post
Share on other sites
kastelic

Go to Platform Pro Settings -> Custom Code -> Custom CSS and put all your CSS there. Don't worry about going in and editing existing CSS, anything you put here will simply override what is in place.

Share this post


Link to post
Share on other sites
catrina

Also, if you have the child theme (PlatformBase) enabled, you have the option to paste it into the base.css file (accessible by going to Appearance > Editor).


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
evannis

I tried putting the code that Catrina gave as an example in the CSS and it's not changing the color of the sidebar. Any suggestions?

Share this post


Link to post
Share on other sites
catrina

Try adding it to base.css file (as I mentioned before you). Make sure the CSS is:

h3.widget-title {color: #000000;}


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
evannis

Hi Catrina, I figured it out, thanks! If i wanted to change things like the line, or use images instead of the widget-title could you point me to resources for this? I'd really like a sidebar that looks like connected boxes vertically down the sidebar. I really appreciate your help.

Share this post


Link to post
Share on other sites
timlinson

It would involve something like this, except with your widget title selector: http://www.pagelines.com/forum/topic/9859 If you want to start getting into customizations like this, you'll want to start by installing tools like Firebug for firefox to help you identify the elements you want to change.

Share this post


Link to post
Share on other sites
evannis

Thanks Tim! Can you suggest where I can find information on adding lines that would separate the sidebar from the main content? The thing I have issues with is the sidebar content just looks like it is floating and not separate from the main content.

Share this post


Link to post
Share on other sites
Kate

Hi Evan, Do you mean adding something like a border or background color to the sidebar?

Share this post


Link to post
Share on other sites
evannis

Hi Kate, Yes, I'm looking to add a border/s and a background color so that the sidebar is somewhat separated from the rest of the page. Thanks, Evan

Share this post


Link to post
Share on other sites
cmunns

Depending on what you want `#sidebar-wrap {background:#F5F5F5;}` or use the #sidebar1 and #sidebar2 ids

Share this post


Link to post
Share on other sites
evannis

Thanks Adam, I'll give it a try

Share this post


Link to post
Share on other sites
evannis

Adam, That gives me a background color. How do i change the width and add a border? Thnks! Evan

Share this post


Link to post
Share on other sites
catrina

Use this code:

#sidebar-wrap {background:#F5F5F5; width: #px; border: 1px solid #COLOR;}

width = Change the # to the width you want.border = 1px adds a 1-pixel-wide border, solid creates a solid border all around, and change #COLOR to the hex code for the color you want


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
evannis

Nope. I actually found a plugin that solved all of my issues. Thanks!

Share this post


Link to post
Share on other sites
malcfinch

Evan...what's the plugin you are using please. cheers malc

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  

×