Converting CSS from an old theme to a new one
-
Hi, I am trying to change themes in order to optimize Word Ads and I was wondering if I switched to a new theme, are you guys able to help convert all the CSS I got help adding before? I worked really hard setting up my site and feel overwhelmed doing it again but do want to have a theme that works better with Word Ads. I have copied and save the current CSS in a word document so I can show what we did. Thanks in advance!
The blog I need help with is: (visible only to logged in users)
-
With regard to WordAds support in themes, there is a list of themes optimized for WordAds here:
http://theme.wordpress.com/themes/features/wordads/If you’re looking at a theme other than one of those, you could try making a request at http://wordads.co/contact/ to see if the WordAds team can accommodate your request.
Or you could hire a designer to help you if the WordAds team doesn’t have the time to convert the theme you’re interested right now and you have a lot of design work that needs to be done. I’m not sure how much work goes into a conversion like that, but the WordAds team should be able to give you a better idea about that if you ask them.
In this forum, we provide support for the Custom Design upgrade: making sure it’s running well, helping with small CSS requests, and getting people started with CSS by teaching basics. We are here to help with question as you go if you want to do the project yourself, however, doing and entire redesign and conversion or setting up support for ads on a theme is not something we cover outright. In those cases, we recommend hiring help and we have a contact form setup where you can check out prices if you’re interested: http://en.support.wordpress.com/customize-my-site/request-theme-customization/
-
I was wondering if I switched to a new theme
Out of curiosity, what theme are you wanting to switch to?
-
Hi there, I am not looking for the kind of help a designer would require. I did my current blog myself with some support with css code from the wordpress help desk. I’m talking little things like changing the colors of my text and getting my logo pic to fit in the header correctly, etc. I am looking at two of the themes given to me by the Word Ads team, twenty eleven and twenty fourteen. Trying to decide between those two. I need the theme to allow me to have a picture somewhere along the top of the blog page for my logo (maybe in the header) along with my tagline being next to it somehow, I want a main content column and a side bar (which it looks like both of those have), allows me to put my current background design (its a jpeg pic I can use), and I would like it to be responsive so adjusts to different devices which I think those do. I have copied all the css codes that are currently used on my blog so I know the things that I got help with before. Some may not be needed with a new theme and some may. I am just looking for a little help to try and figure that out. And I was also wondering, if I change to a new theme and decide to go back to my old, do I lose all the current things on my old theme or will it automatically load it back in? Thanks.
-
Cool. If you wanted someone to do the updates for you and check on all the details for you and convert the old CSS to the new theme for you, then hiring a designer is where I would direct you. :)
If you want to get help with smaller stuff a bit at a time with the idea in mind to learn as you go so you can make CSS updates on your own, then you’re in the right place (that’s what our tools are designed for). We can try to help direct you to educational resources along the way too! Here is a good one I often recommend as a starting point:
http://www.htmldog.com/guides/css/Since CSS is theme-specific, the first thing you should do is decide on a theme. Twenty Eleven and Twenty Fourteen are quite different. It might interest you to check out past CSS help requests for both of those because there are tons of neat snippets for things in there and also because reading through a few may give you a better idea about what CSS editing entails for each theme:
https://en.forums.wordpress.com/tags/twenty-eleven
https://en.forums.wordpress.com/tags/twenty-fourteenYou can also double check theme features here:
http://wordpress.com/themes/twentyeleven
http://wordpress.com/themes/twentyfourteenIn regards to picking a theme, I would suggest choosing the one that comes the very closest to how you picture the final design and also the one where you most like all the little details like how images are displayed or how the post meta data looks. Personally, I think Twenty Eleven looks most like http://veggiesdontbite.com/ does right now and it does already have a content on the left theme option built in. I think Twenty Fourteen has more advanced CSS and can look pretty stunning with the featured posts and images setup.
I need the theme to allow me to have a picture somewhere along the top of the blog page for my logo (maybe in the header) along with my tagline being next to it somehow
This should be doable with any theme using custom CSS.
I want a main content column and a side bar (which it looks like both of those have)
That’s what I see too at http://wordpress.com/themes/twentyeleven and http://wordpress.com/themes/twentyfourteen
allows me to put my current background design (its a jpeg pic I can use)
Both Twenty Eleven and Twenty Fourteen can do this using the free Appearance > Background settings.
I would like it to be responsive so adjusts to different devices which I think those do
They both do. You will need to keep this in mind when you make CSS edits too.
I have copied all the css codes that are currently used on my blog so I know the things that I got help with before.
The past several revisions are also stored in Appearance > Customize > CSS > CSS Revisions (linked in the top right of the panel) after you change themes.
-
Hi there, thanks for the info. I went through all my current css and figured out what each code was for and made a list. Some of the things I will need help with the new css since css is theme specific but I am guessing some of the things may not be needed with a new theme. The list is stuff like size and colors of certain things on the site (text, menu, etc.), spacing of header logo, the way certain things are worded…
I definitely want to learn as I go! I think I like twenty fourteen even though it seems a little daunting and challenging as it looks more complicated. But it looks very sharp. I figure if I am going to change I may as well make a change and not choose a theme that looks very similar already. What do you think?
-
Checked out some of those links, thank you! I think I may make the jump to twenty fourteen….Ah! I will search for help for what I need and if it doesn’t exist create new help topics.
-
I figure if I am going to change I may as well make a change and not choose a theme that looks very similar already. What do you think?
Change it up!
I will search for help for what I need and if it doesn’t exist create new help topics.
Perfect. Cheers.
-
Hi again! So I decided to go with the twenty fourteen theme, and spent the weekend going over some of the help topics in the link you sent me. I wrote down some css I found there for a few changes I want to make, and played around with them in the preview mode of the theme. Before I officially change my theme there are a few questions I have:
1) I saw the css to change the background color in a few of the theme areas, but the only parts it changed when I tried it was the part in the content area where the posts appear. I couldn’t figure out how to change the outer areas. I think I want my background all white.
2) Is it possible to have my custom background design show a little more by perhaps changing the size of the current black area? I would like my custom background design to show a little bit around the edges (as if it were framing it) at least instead of just the very bottom which is what I saw in the preview when I played around with loading a custom background image.
3) Is there a CSS to center my custom header logo image so that it is not stretched out, which is what it did in the preview mode when I uploaded it. Essentially I would like the logo to do what it does now on my current blog theme. If I do center it, will it be in the way of the 6 grid featured posts? If it is, I can have the logo be on the left of the header too.
4) Along with #3 above, I would like my tagline either along the top of my header or along the bottom instead of in a paragraph form on the left sidebar as it is shown in the preview.
5) On my current theme I have some css in there to hide my title and just show my tagline. I used css for this instead of simply deleting my title in the settings area because then my blog title does not show in the wordpress Reader. Can I have the css to do this same thing in the twenty fourteen theme?
Thank you in advance!
-
Twenty Fourteen is a good choice! I checked http://veggiesdontbite.com/ just now and I see you’ve come a long way. :)
For the questions posted here, I’m going to take them one at a time over several replies since there are several very detail-oriented ones.
1) I saw the css to change the background color in a few of the theme areas, but the only parts it changed when I tried it was the part in the content area where the posts appear. I couldn’t figure out how to change the outer areas. I think I want my background all white.
For something like this, I like to do a split between the Appearance > Customize > Colors tool and custom CSS if the theme has a dark background to start with. The reason is that the color tool can be a fast way to update most colors so that you don’t have to spend as much time later adjusting every little piece of text, meta, and other supporting elements. I can see you’ve started doing this already! I noticed the featured content area background on the home page is still white. Here is an example showing how to find the CSS in the theme needed to update that part and apply it to your custom CSS:
And here’s the CSS from the video example:
.grid .featured-content .entry-header { border-color: #fff; } .featured-content, .featured-content .entry-header, .slider-direction-nav a { background-color: #fff; } -
2) Is it possible to have my custom background design show a little more by perhaps changing the size of the current black area? I would like my custom background design to show a little bit around the edges (as if it were framing it) at least instead of just the very bottom which is what I saw in the preview when I played around with loading a custom background image.
This one could be tough. First, note that the way it looks when you view it is not the way it looks to every visitor. It all depends on each person’s display size.
For example, here is a 1280 x 800 view (a common laptop screen size):
https://cloudup.com/cWW33mzXskFCompare that to a 2048 x 1152 view (assuming the viewer has expanded the browser to fill their screen):
https://cloudup.com/clKQoufa0VPOne way to get more of the body background image to show could be to make the main page container smaller, but I wouldn’t recommend it because I think the theme is designed with a very nice width. Here is a CSS example in case you’d like to experiment with the idea anyway:
.site, .site-header { max-width: 1060px; }Another alternative could be to do something like show the background image in the left sidebar as well. Here is a CSS example:
.site:before { background: url('http://veggiesdontbite.files.wordpress.com/2014/03/veggiespatternfaded.jpg'); } #secondary { background: inherit; }If you took this route, you may want to adjust some of the widget background colors because it makes some of the text a bit hard to read.
-
3) Is there a CSS to center my custom header logo image so that it is not stretched out, which is what it did in the preview mode when I uploaded it.
You could probably do something like this with CSS. I’m not sure what you mean about the custom header centering in preview mode—it doesn’t do that when I try testing it and I’m not sure what you did differently.
Essentially I would like the logo to do what it does now on my current blog theme. If I do center it, will it be in the way of the 6 grid featured posts? If it is, I can have the logo be on the left of the header too.
You’ve updated since writing this, and I don’t remember what the logo looked like before the change.
Could you please start a new thread for this at https://en.forums.wordpress.com/forum/css-customization/#postform and include a description of your end goal for the header area that doesn’t depend on knowing what the past site looked like?
-
4) Along with #3 above, I would like my tagline either along the top of my header or along the bottom instead of in a paragraph form on the left sidebar as it is shown in the preview.
It would be easier to use the content property to add a little text with CSS than it would be to move the tagline from the sidebar to somewhere else.
See https://developer.mozilla.org/en-US/docs/Web/CSS/content
-
5) On my current theme I have some css in there to hide my title and just show my tagline. I used css for this instead of simply deleting my title in the settings area because then my blog title does not show in the wordpress Reader. Can I have the css to do this same thing in the twenty fourteen theme?
You can do the same thing, you just need to adjust the CSS selector for the new theme. I see you did it with this:
h1.site-title a { display: none; } -
Hi thanks! Yes, I have been working hard trying to modify the theme for my site.
1) You say that you noticed it is still white, I am guessing you meant grey because your example changed it to white…I tried putting that CSS in and it didn’t work. I even double checked with the video and it looks like the CSS is the same. Are we missing something?
Also, I wanted to see what your opinion was visually about keeping the grid with a grey background versus changing it to a white one? The grey sort of separates the grid pictures a bit and that may be a nice touch…Thoughts?
2) I don’t want to ruin how the theme looks in other places, nor mess with it too much so I’ll skip doing anything major like you said. I may play around with having it show in the left sidebar…is there a way to make each widget in a white box, so that the text looks better and then the background can just show around the widget box area?
3) & 4) Yes, I did play around with it since I wrote this…sorry! I ended up creating a header image on pic software that includes my logo on the left and then my tagline into the image so it is in the header too. I think I like it the way I have done it, what do you think?
5) Thanks!
Here are some additional questions as I have been playing around with the site building:
6) I have my widget titles in turquoise boxes with the following CSS:
.widget .widget-title {
background-color: #059E9B;
color: #fff;
}.content-sidebar.widget-area .widget .widget-title {
color: #fff;
}Can I center the titles within those boxes so that they aren’t just touching the left side?
7) I have the colors changed for my post titles, categories above the title, and want also to change the info below (date, comment count, etc.) but the CSS I have won’t change that part. I does work for the titles and category labels though. Here is what I have, I want the post titles 059E9B and the other two 8BA14E:
h1.entry-title a {
color: #059E9B;
}div.entry-meta {
color: #8BA14E;
}span.cat-links a {
color: #8BA14E;
}8) I have CSS to change the color of the tags under each post except that the tip is still grey…also it doesn’t work on the iPhone version, just see grey there. I changed the text color to white too, did I do that right and how do I fix the tips and iPhone version? Here is what I have:
.entry-meta span.tag-links a {
background-color: #8BA14E;
color: #fff;
}9) So I have CSS to change the text size in my menu and another thread told me that now that I did that it affects the way the menu looks on some devices, I guess it drops it down. With this I also had added CSS to change the color of the menu box, so if I leave the menu box grey does the text size change still make the menu drop down like they said? I never saw this problem so I want to make sure it’s ok. I had this CSS for the size and I originally had it set at 17 but changed to 16 to see if that helped the problem:
.nav-menu {
font-size: 16px;
}10) I am trying to see if there is CSS for this theme so that when you click a category it is possible to show the results in a series of boxes, almost like the grid on this theme instead of what it does currently which is lists all the posts in that category one after another. I had some css that did this in my old theme.
I think this is it for now. With all these getting fixed I think I am happy with what I have created! Thanks in advance for your help.
-
@veggiesdontbite, this is too many issues in one thread and makes it hard to get to to give help and also difficult to keep track of the various separate issues in a conversation. Can you please put new questions/comments in separate help requests in the future? We’ve found it works best and is most helpful to others that way too.
I will continue answering here one issue per reply and also try to keep helping you by directing you to good resources for learning. :)
-
Let’s start with #1 and resolve that before moving to the next thing.
1) You say that you noticed it is still white, I am guessing you meant grey because your example changed it to white…I tried putting that CSS in and it didn’t work. I even double checked with the video and it looks like the CSS is the same. Are we missing something?
Yes, I meant gray.
I checked your current CSS at http://veggiesdontbite.com/?custom-css=1&csblog=45m0O&cscache=6&csrev=149 and I don’t see the example saved. Are you sure you saved it?
Also, I wanted to see what your opinion was visually about keeping the grid with a grey background versus changing it to a white one? The grey sort of separates the grid pictures a bit and that may be a nice touch…Thoughts?
Looks good either way to me! Personally speaking, I quite like minimal designs, so if I *had* to choose, I’d probably pick all white. :)
-
Hi there,
Sorry about including so much in one post. I was under the assumption it was easier this way as I was never told otherwise in the past. I am just trying to get my new theme up and running as quickly as I can for my followers…I had to change my theme for better optimization for Word Ads since I just qualified. I spent so much time with my old theme and I assure you I have learned a ton. I started with zero knowledge about anything computer/website/design. I hadn’t even heard of CSS, so I probably need more help than others.
1) I tried again from scratch and it works now! I must have been missing something before. Thanks!
My next question is this (Do you want me to start new threads with the other questions?) :
I have my widget titles in turquoise boxes with the following CSS:
.widget .widget-title {
background-color: #059E9B;
color: #fff;
}.content-sidebar.widget-area .widget .widget-title {
color: #fff;
}Can I center the titles within those boxes so that they aren’t just touching the left side?
-
Oh and I am using a Mac, so my right click does not allow me to click “inspect element” to see the code…
-
On your widget titles, the following will add some padding to the left, but keep them left aligned. Find .content-sidebar.widget-area .widget .widget-title and add the center or padding declarations to it.
The following will center the widget titles.
.content-sidebar.widget-area .widget .widget-title { color: #FFFFFF; text-align: center; }Give them both a try and see what you think.
- The topic ‘Converting CSS from an old theme to a new one’ is closed to new replies.
WordPress.com Forums 