WordPress.com

1. cerissamngm
   Member
   Mar 6, 2013, 12:54 AM

   I understand css and html, but I'm a little confused about how to translate it into wordpress customization css.

   I'm using the Confit theme and would like the left sidebar wider, what selector would I use to override the current width...for example?

   Is there a directory for that? Maybe I'm all confused..

   The blog I need help with is smurflove.wordpress.com.

2. designsimply
   Staff
   Mar 6, 2013, 6:37 PM

   The WordPress.com CSS editor works by letting you add new CSS to override, or add-on, to the original theme's design. You can do that by adding just the CSS changes to the Appearance → Custom Design → CSS editor in your blog dashboard. Here is a help page that goes over the details too:
   http://en.support.wordpress.com/custom-design/editing-css/

   In order to modify the design of the Confit theme using CSS, I would recommend using your built in browser tools to right-click the left sidebar, find it in the HTML, and look at the CSS that's being used to set the width for it. Then what you can do is write a rule that just changes the sidebar width and put that in your Appearance → Custom Design → CSS editor.

   There is also a way to view the theme's original CSS by going to Appearance → Custom Design → CSS and clicking the "Edit" link next to "Mode: Add-on". Note that you should not copy and paste the entire theme stylesheet into the CSS editor unless you are using the more advanced CSS replacement option.

   Here is an example that you can start with for making the left sidebar bigger in the Confit theme. I used an @media rule so it would only affect large display sizes and leave the responsive styles for small screens like mobile devices as is.

   @media screen and (min-width: 965px) {
   	#page:before,
   	#masthead,
   	#secondary {
   		width: 382px;
   	}
   	#wrapper {
   		max-width: 1054px;
   	}
   	#primary {
   		width: 58.77987421%;
   	}
   }

   You can experiment and adjust the screen sizes if you'd like to use a different width.

3. cerissamngm
   Member
   Mar 6, 2013, 6:49 PM

   Thank you so much!!

4. cerissamngm
   Member
   Mar 6, 2013, 8:50 PM

   I have another question.

   Is there a way to style widgets and add social media icons just under the site title/ above profile pic?? Any good references?

   Thanks!

5. designsimply
   Staff
   Mar 7, 2013, 1:56 PM

   Is there a way to style widgets and add social media icons just under the site title/ above profile pic?? Any good references?

   Something like that would be different for each theme. What you can do is use absolute positioning to move the widget you used to add your social media icons to a different place in the layout. I put together an example to get you started:

   #page {
   	position: relative;
   }
   
   #secondary {
   	overflow: visible;
   }
   
   #linkcat-50521619 {
   	position: absolute;
   	top: -170px;
   }

   In that example, I used the ID value "linkcat-50521619" as a selector in the last part of the CSS because that is what the links widget got assigned as a unique ID after you added it on the Appearance → Widgets page.

   The relative positioning for "#page" was added so that you can position the links widget relative to the "#page" container element. See this link for a really nice explanation about how that works:
   http://css-tricks.com/absolute-positioning-inside-relative-positioning/

   I added "overflow: visible" to the left sidebar container "#secondary" because the theme had set "overflow: hidden" for it before, but now we want to move something outside that space and still have it show up.

   I suggest adding the example CSS from above inside a "@media screen and (min-width: 965px)" block in your Appearance → Custom Design → CSS editor so that you don't modify the other layouts that were created for smaller displays like iPads or mobile devices. If you want to move the social media icons in those smaller layouts as well, you will need to study how media queries, figure out which ones you want to target, and apply the example from above to different media queries to experiment in each one until you find a good set of CSS that works for each one you want to adjust.

   Here is a good primer on media queries if you're interested:
   http://webdesignerwall.com/tutorials/css3-media-queries

Topic Closed

This topic has been closed to new replies.