WordPress.com is an easy way to start blogging. Get a blog, check out our features, read the latest announcements, choose from great themes, or learn about the team behind it.
Need help? Check out our Support site, then
Dear Helper. I am using Ocean Mist template.
My first question is How can I make the "existing Stylesheet" show up in the CSS Slylessheet Editor so I can modify the Body width of my Web Site?
I clicked on "View the original stylesheet", it popped up the Notepad Editor Page, but this is the Original (old) one. I hope some one show me how to pop up the existing site. I want to modify the body width of this site .
Thank you.
The blog I need help with is cdvnga.com.
My web is http://www.cdvnga.com
Thanks
My first question is How can I make the "existing Stylesheet" show up in the CSS Slylessheet Editor so I can modify the Body width of my Web Site?
You shouldn't copy the original stylesheet into your Appearance → Custom Design → CSS editor. Instead, what you should do is look at the original stylesheet as a reference, then write new CSS to make adjustments. The new CSS you write should be added to the Appearance → Custom Design → CSS editor.
Changing the width or the Ocean Mist theme is not an easy task because of how the original theme was designed. I worked on it for a while and came up with one possible way to do it. This example won't match the original exactly, but it's close. Also, it uses CSS3 instead of background images to setup shadows and border radius, and so those parts of the example will only work in modern web browsers. If this is acceptable to you, then try out this example by adding this CSS to your Appearance → Custom Design → CSS editor:
designsimply#content {
width: 70%;
}
#sidebar {
width: 30%;
}
#mainpic,
#header .pagetabs,
.title,
div#respond h3,
.post,
#footer {
width: 100%;
}
#page,
#header {
width: 980px;
}
#page {
margin-top: 20px;
background: #e8eef5;
-webkit-box-shadow: -2px 0px 6px rgba(50, 50, 50, 0.25), 2px 0px 6px rgba(50, 50, 50, 0.25);
-moz-box-shadow: -2px 0px 6px rgba(50, 50, 50, 0.25),2px 0px 6px rgba(50, 50, 50, 0.25);
box-shadow: -2px 0px 6px rgba(50, 50, 50, 0.25),2px 0px 6px rgba(50, 50, 50, 0.25);
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
#content {
-webkit-box-shadow: 8px 8px 20px rgba(50, 50, 50, 0.10);
-moz-box-shadow: 8px 8px 20px rgba(50, 50, 50, 0.10);
box-shadow: 8px 8px 20px rgba(50, 50, 50, 0.10);
}
#sidebar .title {
width: 100%;
background: #cadfed;
-webkit-box-shadow: inset 20px 0 20px -20px rgba(50, 50, 50, 0.4);
-moz-box-shadow: inset 20px 0 20px -20px rgba(50, 50, 50, 0.4);
box-shadow: inset 20px 0 20px -20px rgba(50, 50, 50, 0.4);
}
#content {
background: #fff;
}
#header {
background: #3e4347;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
#mainpic {
background: url(http://cdvnga.files.wordpress.com/2012/05/cropped-header_05_235.jpg) repeat-x !important;
}
#mainpic,
#content {
margin: 0;
}
#footer {
padding-top: 2em;
padding-bottom: 2em;
background: none;
border-bottom: 0;
margin-bottom: 10px;
}
#footer-top {
display: none;
}
#footer p {
padding: 0;
margin: 0;
}Note that this CSS overrides the background image set in Appearance → Background because that one is limited to a specific size. You can change out the header image by replacing the url() value in the #mainpic block.
Thanks for the quick respond. I did try (copy and paste) your note, it worked but I have long way to modify the whole thing. Wish, just wish, CSS should make a template or a window like "Custom Fonts" so we all can SEE and MODIFY where and what you want to change, according to our vision.
For customizations like the one you've asked for, you've simply got to put in the time to create the CSS to make those changes. We are working on new tools to make design and customization updates easier, but every single theme at WordPress.com is unique and making them all work in a similar way with simple customization tools takes a lot of time and effort.
Note that if you want to change the width of the example I posted above, find the "980px" value, change it to something larger, and the rest of the site should adjust automatically based on the percentages in the rest of the example.
I understand very well now.
Thank You so much.
TT
Cheers! That was a totally interesting and challenging question to work on actually. :)
Cheers too :)
I need to contact you directy. Please go to my web site truesoundandlight.com, my contact is in there.
Thanks.
True
The best place to contact me is here in the forums. :)
I can't win :) .. Acually I just want to contact you for a side job, helping me few things for my web site. I am so busy with other stuff.
1- Resize the body of my web (You did helped me)
2- I want my header plays the slide show (about 4, 5 pictures)
3- Another slide show on Home page (bottom - center)
I could not find any Theme with slide show on the header. There are to many themes in WordPress, my eyes were blury after a while :)
What do you think ?
Best day ..
True
2- I want my header plays the slide show (about 4, 5 pictures)
WordPress.com doesn't offer an option for you to add a header slider that advances automatically to a theme that doesn't have it built in by default, so you would need to change themes in order to do that.
If you'd like to look at all of the WordPress.com themes that have a post slider, check out these:
http://en.forums.wordpress.com/tags/post-slider
Here are a few that have sliders that advance automatically: Bold News, Currents, Debut, Duet, Forever, Modularity Lite, On Demand.
3- Another slide show on Home page (bottom - center)
Here are our slideshow options:
http://en.support.wordpress.com/slideshow/
If you need to hire someone to help you with your site, we have a directory of WordPress professionals at http://directory.codepoet.com/
Thank you so much. I think i am going to purchase theme "On Demand".
If I have problem or something that I do not understand, I will BOTHER you :)
I have to start all over again ...
Nice day Designsimply.
True
By the way, while I am editing the Web, I do not want people log in, how can I disable the web site until I am done?
How can I disable the web site until I am done?
You can make the blog private temporarily.
http://en.support.wordpress.com/settings/privacy-settings/
Thanks :) I will update my site soon, maybe few days.
True
Hi designsimply
I just got the On Demand.
Is it possible to have my web LOOK the same as On Deman Demo?
Hope you can help me.
Thank you.
Hi designsimply, My On Demand web site does not turn on the "Leave A Reply " button. I need help PLEASE !
Thanks.
Hi! Could you please start a new thread for issues that are separate from the one in the original thread? Here's where to do it: http://en.forums.wordpress.com/forum/css-customization/#postform
Just to get you started, here are the information pages about On Demand:
http://premium-themes.forums.wordpress.com/topic/on-demand-usage-faqs?replies=1
http://theme.wordpress.com/themes/on-demand/
There are also premium themes forums dedicated to helping you with your premium theme purchase: http://premium-themes.forums.wordpress.com/
If you need help with CSS issues, then start a new thread here: http://en.forums.wordpress.com/forum/css-customization/#postform
Thanks. I already did it.
This topic has been closed to new replies.
