Converting CSS from an old theme to a new one
-
-
Great! One last thing, I am trying to see if there is CSS for this theme so that when you click a category, or select one from the menu up top, the results show either in a series of boxes, almost like the grid on this theme, or with just the feature image and title as it does on the iPhone. Currently it lists all the posts in that category one after another. I had some css that did something similar 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 all your help.
-
Ah, yes we can do that. The following hides the body content and leaves the title, featured image and the things around it and keeps the tags below.
.archive .entry-content { display: none; }If you also want to hide the tags (like on the phone view), then use the following instead.
.archive .entry-content, .archive .site-content footer.entry-meta { display: none; }Note: I’ve used .archive so that it also hides the body content on archive and tag pages in addition to the category pages. If you want to hide only on category pages, change .archive to .category.
-
-
Thank you! A lot of work and help from you all…
Is there a way to make the CSS above result in smaller lists…i.e have the list of dessert titles for example be smaller than the normal post size.
-
Sure, we will again target archive page types and the entry title. Adjust as desired. The main page is 18px for the entry titles in the grid at the top.
.archive .entry-title { font-size: 33px; } -
-
They could, but given the basic design of that page, it would require a lot of CSS to make things look right, and it would likely require a good number of media queries to keep things looking right as the screen size and browser window widths changed. And also, we would be asking the browser to resize the images (since the size is determined by the theme PHP script files) so they would lose quality and become fuzzy.
-
-
One more thing in addition to the above, my husband is looking at my site from a PC, windows 7 and the area where the recipe titles are in my 6 grid boxes up top has a black frame around each writing box. Can you see that on your end or know a way to fix that? Not sure if my CSS is wrong or missing something for the PC side. Thanks!
-
I don’t know of any way to put the posts into a grid structure on category pages.
I’m not seeing any black boxes around the writing in the 6 grid boxes at the top of the main page in IE10 or IE11. What version of IE is your husband running?
-
I think he said it was version 8…an older one. He tried it on the computer with a newer version and it was fine. It seems to be a problem with the old versions.
-
Ah, I don’t have 8 installed, but I know IE8 browser market share is down under 6%, and it does not support a lot of the current web standards. You might (gently) suggest he update to a newer version of IE, or perhaps to Google Chrome. :)
-
Lol! Yes, it’s my husband’s work computer and he unfortunately can’t add any software. They definitely need to keep up with the times!
He doesn’t usually look at my site on it, but did randomly the other day.
Thanks again for all your help! If you think of any way to put menu results in boxes let me know. Here is the CSS that did it on my old theme…
.category .event-items .span12 {
width: 48%;
margin: 1%;
padding: 10px;
border: 1px black solid;
} -
@veggiesdontbite, for the columns on the categories pages, add the following CSS, but I do have a caveat: The elements in the posts, such as titles and tags can break weird at certain browser widths as a post may be at the top of the second column with its title and metadata at the bottom of the first column. Haven’t figured out how to keep that from happening.
Oh and also, for IE users, they will only see the columns for IE10 and newer as earlier versions did not support the CSS3 column stuff.
Also, I’ve limited this to a screen/window width of 600px and wider since that seems to be a good point to take it back to the original design (small tablets and phones).
@media screen and (min-width: 601px) { body.category .site-content { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; -webkit-column-gap:40px; -moz-column-gap:40px; column-gap:30px; display: } body.category .entry-header, body.category .entry-meta { margin-left: 20px; margin-right: 20px; } } -
Tried it and you’re right, it looks weird. I was thinking more of the same look as is on the iPhone when you search a category. Box of pic on the left with title on the right…or like this website: http://ohsheglows.com/categories/recipes-2/breakfast/
-
Hmmm, I just looked at the iPhone view in my responsive view plugin. Let me see if I can take that up to the full site.
-
If you figure it out then great but don’t worry too much about it, it’s just aesthetics at this point. I am really happy with the site overall! I appreciate all your help!
-
-
- The topic ‘Converting CSS from an old theme to a new one’ is closed to new replies.
WordPress.com Forums 