Jump to content
Sign in to follow this  
erik@grancanaria360.com

Full width & primary sidebars padding and margin

Recommended Posts

Kate
Hey Erik, Which margins/padding? Top, sides, all? BTW: I answered your question in the other thread about widgets. Perhaps you just want to reduce the padding/margin of the widgets? Let us know!

Share this post


Link to post
Share on other sites
Hi Kate. I would actually like to know how to reduce the margin and the padding in both dimensions, for any future changes... I thought I would ask about the transparent sidebar in a different thread as it is a different issue..? Thanks!!

Share this post


Link to post
Share on other sites
kastelic
You will want to install Google Chrome and learn how to use the built-in developer tools to identify which css rules that you need to override in each case. Once you have found the correct class or id to override you can put your CSS code in Custom Code -> Custom CSS. As an example here is a line that will eliminate padding around the universal sidebar: [code] #list_sb_fullwidth .widget-pad { padding: 0; } [/code]

Share this post


Link to post
Share on other sites
Hi Thanks for your kind reply. In full honesty I have no clue how developers tools works. Add to that the fact that my css/coding skill are bellow zero... I would still very much appreciate if the codes for padding and margin for fullwidth sidebar, primary sidebar and universal sidebar could be provided. Thanks so, so much in advance.. Erik.

Share this post


Link to post
Share on other sites
catrina
You can reduce space using different values for different sides (the top, bottom, left, and right). For example, this is the padding code for the top, bottom, left, and right sides of the area: [code]padding-top: #px; padding-bottom: #px; padding-left: #px; padding-right: #px;[/code] Replace # with the values you want for the padding sizes. There is more on padding here: http://w3schools.com/css/css_padding.asp

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
Thanks for all the help. You guys keep coming with solutions to our trouble and we guys keep bugging you with more and more questions.. :) I introduced the code provided by kastelic in the custom CSS area, but nothing is happening. Let me paste the entire code I have in my custom CSS area right now, in case there is some kind of syntax error there.. [code]body {background-image: url('http://appcaffe.com/images/fondos/light/xv.png'); background-repeat: repeat; background-attachment: fixed;} .post-thumb.img { width: 35% !important; } #list_sb_fullwidth .widget-pad { padding: 0; } .scolumn .widget-pad{background:none;border:none;} .scolumn .widget{border:none;background:none;} .scolumn .widget{-moz-box-shadow:none;}[/code] I would also appreciate knowing what is the precise code to affect padding for the "full-width" sidebar, "primary and secondary sidebar" and "feature". Thanks in advance for the kind help. Erik.

Share this post


Link to post
Share on other sites
As suggested here I have been trying to play with the css??s padding. I am baffled!! I will attach some images and some code to see if we can walk through this together.. I am editing the code in the style.css file in my iBlogPro5 (through the control panel editor). I have copied the original file to my desktop so I can restore it if anything goes terribly wrong. This is the current state of things: [img]http://appcaffe.com/images/temp/screen-capture-2.png[/img] Note that there is a slight shadow underneath the ad in the sidebar (i believe even when I made the sidebar transparent, this is still a residue that I will have to work out how to eliminate). I will, anyhow, use this shadow to measure what is happening when I alter the code. The css for the image above is: [code]/* @ Layout Column Padding */ .fullwidth #column-main .mcolumn-pad{ padding: 0px;} .one-sidebar-right #column-main .mcolumn-pad, .two-sidebar-right #column-main .mcolumn-pad{ padding: 0em 15px 0px 0;} .one-sidebar-left #column-main .mcolumn-pad, .two-sidebar-left #column-main .mcolumn-pad{ padding: 0em 0px 0 15px; }[/code] By altering the padding to: [code].one-sidebar-right #column-main .mcolumn-pad, .two-sidebar-right #column-main .mcolumn-pad{ padding: 0em 0px 0px 0;}[/code] I get the following: [img]http://appcaffe.com/images/temp/screen-capture-3.png[/img] Note that the shadow under the is now closer to the main content, BUT the diastance between the ad??s edge and the sidebar border remains unaltered?? I thought that padding affected the space INSIDE the element, between the content and the border, but that is not what is happening here!! Basicaly, what I want is to have the ad occupy the whole space of the sidebar, with no space between the page and the border... I am completely LOST!! Any help? Thanks!!

Share this post


Link to post
Share on other sites
I think I understand what is going on here!! The CSS I altered is acting upon the ENTIRE sidebar. not over it??s content (widgets). I guess the widgets CSS is in the page lines framework css file, but I have been looking inside that one and I can??t identify the different elements. I would love to be able to code this elements, I believe the coding behind this framework is brilliant, but sadly, my skills are far, far away from that.. Any help with this issue?? Thanks!!

Share this post


Link to post
Share on other sites
finlandia
Hi @[email protected] - I'm not sure I understand exactly what you are trying what you are trying to achieve, but I think you should change the css of the widgets ( as you said - not the css of the entire sidebar). From the screenshots above, I think you have moved the sidebar to the left (closer to the content). If you're unsure which css to edit, you can try using Google Chrome web browser of Firebug - Mozilla Firefox plugin. Google Chrome - go to view > developer > developer tools - the browser window will be separated into two parts. In the lower part, you should see the code. There is a small magnifier icon at the bottom of the window - click on it and then move the cursor over your site. Select the element you want to inspect and click - in the lower part of the screen you should see the css. Firebug ( plugin for Firefox ) - download it from here, and install [url]http://getfirebug.com/[/url] It is very similar to Google developer tool - again the screen is separated into two parts - in the upper part is the inspected website, in the lower - the source code. To start Firebug you should click on the "bug" icon (upper right) next to the "search" field in Firefox. When the window is separated into two parts, you should click on a small icon ( blue box with blue cursor on it) situated in left part of the tab which separates the browser window. Like in Google Chrome the element under the cursor is marked with color, and after click, you may see the css in the lower-right part of the window. Hope it's helpful for you!

Share this post


Link to post
Share on other sites
First of all, please let me express my gratitude for all the help received here. As suggested in the previous post, I have been playing with developer tools in Chrome. Quite a discovery!! B-) I have been tweaking the code here and there and have managed to get it mostly to where I wanted it. There is one thing, though, i just can??t manage to do. If you see the image below, you will see a misalignment between the sidebar content and the top of the main column??s content and the right side of the site (determined by the right extreme of the feature content). I have placed two guides in Photoshop to illustrate the said misalignment: [img]http://appcaffe.com/images/temp/screen-capture-4.png[/img] I would like to have the sidebar (content) aligned to the point where the guides are. Please see below the code I have used in the custom CSS area so far: [code]body {background-image: url('http://appcaffe.com/images/fondos/light/xv.png'); background-repeat: repeat; background-attachment: fixed;} .textwidget {padding: 0px ; } .widget-pad {padding: 0px; } .content-pad {padding:5px ; } .post-thumb.img { width: 29% !important; } .clip .post-thumb.img { width: 34% !important; } .scolumn .widget-pad{background:none;border:none;} .scolumn .widget{border:none;background:none;} .scolumn .widget{-moz-box-shadow:none;} #feature_slider .fcontent .dcol-pad { padding: 10px 30px 20px 30px; height: 200px; }[/code] Once again, my site is: www.appcaffe.com Hope I have made my point clear enough and that you??ll be able to walk me through to achieve the desired look. Once again, thanks ever so much for the kind help and the patience. Erik.

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  

×