Column Width

scottvonholzen · Member · May 19, 2013 at 6:15 pm
Copy link

Add topic to favorites
Dear or Sir or Madam:
I am using Chaotic Soul for my WordPress Theme. I have the Customize option. When I go to Appearance – Customize page I now have this vertical options column on the right side. When I click on CSS I can see the changes I made, way back when I first started using ChaoticSoul, but I cannot see the rest of the HTML code with the scripts that make up this Theme. What I want to do is simply change the column width of the links. Is this possible?
Thank You
Scott Von HOlzen
designsimply · Member · May 20, 2013 at 7:46 pm
Copy link
The CSS editor is where you should add updated CSS rules, it is not designed to show the full CSS or HTML for your theme. You should use your browser tools to do that. To find them, right click on any element on the page and select the “Inspect Element” option. You should see the HTML for the item you clicked on highlighted as well as all the CSS that applies to that element on the right.

What I want to do is simply change the column width of the links. Is this possible?

Do you mean that you want to change the width of the sidebar or change the width of the entire container including both the main content area and sidebar?
scottvonholzen · Member · May 20, 2013 at 10:55 pm
Copy link
Yes, you are correct I would like to change the sidebar, and may see an advantage to widening out the entire container.
designsimply · Member · May 21, 2013 at 10:18 pm
Copy link
ChaoticSoul uses two background images as part of of it’s design. One of the images is laid over the top of the header giving it a split pane window type look. The other draws some of the background lines behind the main content area. If you wanted to keep the exact same original design, you would need to download each of the images, update them to the new sizes, re-upload them to your blog, and write the CSS needed to add them back to the theme at the changed size. You would be on your own to update the images, but this forum could help with the CSS if you decided to go that route. Here are the images for reference:
http://s2.wp.com/wp-content/themes/pub/chaoticsoul/images/content_bkg.gif
http://s2.wp.com/wp-content/themes/pub/chaoticsoul/images/header_overlay.gif

I think the design looks fine without them, so the alternate option is to remove them like this:
```
#wrapper,
#header-overlay {
	background: none;
}
```
To change the width of the theme’s content area, there are several elements that need to be adjusted. Here is an example showing how to update them. This example expands the design by 200px overall, 100px for the main column as well as the sidebar.
```
#page,
#header,
#header-overlay,
#wrapper,
#headerimg {
	width: 960px;
}
#access,
.hr {
	width: 958px;
}
#content {
	width: 617px;
}
#sidebar {
	width: 300px;
}
```
You can adjust the numbers differently if you’d like.

Once you change the size, you’ll notice the header image doesn’t change along with it. To update that, you can override the image set via the theme settings and use CSS to replace it. Here is the technique:
```
#header-image img {
	display: none;
}
#header-image {
	display: block;
	width: 960px;
	height: 151px;
	background: url(http://scottvonholzen.files.wordpress.com/2010/01/cropped-canonind_2.jpg) center repeat-x;
}
```
You can use a different image if you’d like. In the example above, I just copied out your current header image link, centered it, and made it repeat along the x-axis (the “repeat-x” part).
scottvonholzen · Member · May 22, 2013 at 2:53 am
Copy link
Thank you very much. You have been more then generous sharing your knowledge, and it much appreciated.
First, you have thrown a lot at me, and that I find challenging, but what happens if I mess up this exceptional theme? How do I back it up, so I can revert?

Now, another of the basics, in order for me to make the above width changes, I’m I understanding this right, I need to go into my Dashboard – appearance – customize – and click on the CSS link on the sidebar, and add my change code after the code that I added to change the header, a long time ago?

I have another question, but am running out of time for, tonight. I will follow up tomorrow, once I look more extensively, at your advice.
Thank you
Scott
thesacredpath · Member · May 22, 2013 at 3:03 am
Copy link
To get back to square one (no custom CSS) go to the custom CSS entry area, remove all of the CSS you have added and then click “save changes.”
thesacredpath · Member · May 22, 2013 at 3:04 am
Copy link
And yes, add the CSS above to what you already have in the CSS window at customize.
scottvonholzen · Member · May 23, 2013 at 1:37 am
Copy link
This question concerns the discussion about changing the content_bkg.gif. I see that through Support they have access to the files so I was linked to them to download, make changes, but my question is how do I go about uploading the altered gif back into the html code? I am mostly curious about this option.

This question, I am certain I want to make a change, concerns the header image. I did crete a different image that was wider to fit the changes I made the theme, but now it looks a little long and thin. The theme width for the header image was set at 151 pixels. I would like to widen that header image size to 200 pixels. I looked around in the html by right clicking the blog and selecting ‘inspect elements’, but I missed seeing it. Where is it? And how do I go about widening the header image from 151 to 200 pixels?
Thank you again, you have been a great help.
Scott
scottvonholzen · Member · May 24, 2013 at 12:37 am
Copy link
I was able to change the header width when I saw the code in the CSS editor. So that takes care of that. I believe if I change the content_bkg.gif I can simply upload it to my site, like I do images, and then just change the link address in the Editor. I would need to find the CSS for that and copy it into Editor, but I should be able to find that.

My final question, and then you can close this discussion. I have noticed using the ChaoticSoul theme that once you scroll down past the current blog entry, the font size changes and may appear to be a little small for some viewers. Can the Font Size on older posts being viewed by scrolling, be changed?

thank you again for all of your help
designsimply · Member · Jun 5, 2013 at 8:54 am
Copy link
my question is how do I go about uploading the altered gif back into the html code?

You have it correct in your latest comment above this one: to upload an altered GIF image file, you would just use the image library in your blog: http://en.support.wordpress.com/images/#upload-images-from-your-computer Then you would copy the image link and use that in your CSS.
designsimply · Member · Jun 5, 2013 at 12:59 pm
Copy link
I have noticed using the ChaoticSoul theme that once you scroll down past the current blog entry, the font size changes and may appear to be a little small for some viewers. Can the Font Size on older posts being viewed by scrolling, be changed?

I’m not seeing that happen at http://scottvonholzen.org/ currently. Try working with the size settings in the Appearance → Custom Design → Fonts panel first if you want to change the font size for body text.
justpi · Member · Jun 5, 2013 at 1:21 pm
Copy link
That’s the way ChaoticSoul was always styled: the top post is highlighted by a slightly larger font.
designsimply · Member · Jun 17, 2013 at 4:20 pm
Copy link
You’re right! What a subtle change. I didn’t notice it at all the first time I looked. Thanks, @justpi.

I would approach this by undoing the larger font size for the top entry and then using “#content” as a selector to increase the font size for the base content area font:
```
.top .entry {
    font-size: 1em;
}

#content {
	font-size: 1.3em
}
```

No items found.