newtocode
Member
Posted 8 months ago #
Hi Everyone,
You guys have helped me so far...I've been searching the forums a lot...
I made a child theme using the Coraline theme as my parent. I want to widen my main content area width to look like this: http://bleubirdvintage.typepad.com
So far I have widened the main content area margin and the side bar to line up like the website I've showed you. However, I am UNABLE to have the actual post content line up like the website I've showed you. I want the writing and images to fill up the whole width up to the sidebar like shown in the above link.
Does anyone know the code or what I should edit to achieve that look?
Thank you so much!
In which website do you want this widened content width?
newtocode
Member
Posted 8 months ago #
Right now I'm just using the basic Coraline theme. I'm fooling around with the CSS preview option. None of these codes have actually been applied. I didnt want to purchase the CSS upgrade if I wasnt sure I could achieve this look.
It's difficult to envisage your issue, can you link the problematic web page?
newtocode
Member
Posted 8 months ago #
None of the margin code that I have spoken about is applied because I did not pay for the CSS upgrade yet, so you cant view any changes. Im only checking this all in the free preview option.
Thanks.
Assuming you're using a Child Theme or have a Custom Style/CSS plugin, you need to change the containing element's width;
E.g add
.two-column #container {
max-width: 970px;
}
Then find out how the image width is set and expand that to 630 pixels (width). It's probably in the dashboard somewhere.
If you want the <header> element to keep its original size, try setting the width to 75% and removing float: left;.
E.g
#header {
float: none;
width: 75%;
}
newtocode
Member
Posted 8 months ago #
Thanks Andrew. I have the container max width changed - that's what I originally changed to have the margins wider. I have it set at 1000px
The problem I'm running into is I cant get the actually content...the post writing and images to enlarge and fill that area.
I couldnt find the image width option in the dashboard - its very possibly I missed it though.
Any idea how to make the writing fill that whole content area?
Thanks again. :)
Expand <div id="content">
E.g
.two-column #content {
width: 75%;
}
Originally it's set to 64.99%.
newtocode
Member
Posted 8 months ago #
Yes! That worked! The writing is now filling up that whole margin area. Any idea how to make that work for the photos as well ?
Thank you!!!
Changing the photo width with CSS will stretch the photo. You need to find where the image size is being defined, search the forums for similar issues.
I don't know where the image size is defined.
newtocode
Member
Posted 8 months ago #
Okay thanks. I'll keep searching. You've been so helpful!!!
newtocode
Member
Posted 8 months ago #
This is unrelated, but do you know how to remove the lines above and below the header?
Two lines are added via CSS on the image;
#branding img {
border: 1px solid black;
}
Another line is added via CSS on the navigation;
#access {
border-top: 1px solid #CCC;
}
You can find which styles are applying to which elements by using an Inspector tool, such as Google Chrome's built-in Inspect Element or Firefox's FireBug tools.
newtocode
Member
Posted 8 months ago #
I didnt want to purchase the CSS upgrade
this sounds as if your site is with WordPress.
com - in which case, please ask at
http://en.forums.wordpress.com/
this forum here is specific for WordPress.org - the difference http://en.support.wordpress.com/com-vs-org/
