Change feature image size css

  • Unknown's avatar
    uniqueartchic · Member ·

    Thank you very much. I have managed to get the category title on the page, but the description just isnt going on for some reason.

    I would like the title to be bold capitals (to the left) and the description to be italic underneath it, also to the left. e.g. exactly like this:

    DIGITAL ART COLLECTION: Featuring Posters, Graphics, Typography, and other Digital Artwork.

    Where a greeting card is shown in this category it’s because the posts contain separate digital elements. Some graphics are available for you to download and use in your own creations. There are also many poster designs here too, and I enjoy experimenting with Wordart.

  • Unknown's avatar
    inuttall · Member ·

    What you could do instead then is edit your Digital Art & Graphics category in Posts > Categories and change the name to DIGITAL ART COLLECTION: Featuring Posters, Graphics, Typography, and other Digital Artwork.

    Note: This is the easiest way to break it over two lines like you describe, but it will make your categories VERY long on posts. You’ll also need to edit your menu items to say Digital Art & Graphics instead of the long version.

    If you want to keep the existing category names so this is shorter and not a problem, that’s fine and it will look like:

    Digital Art & Graphics
    Where a greeting card is shown in this category it’s because the posts contain separate digital elements. Some graphics are available for you to download and use in your own creations. There are also many poster designs here too, and I enjoy experimenting with Wordart.

    Here’s some code that will do what you want:

    .archive-title {
text-align: left;	
text-transform: none;
}

.category .archive-title::after {;
	display: block;
	font-style: italic;
	font-size: 20px;
}

.category-30681325 .archive-title::after {
	content: "Where a greeting card is shown in this category it's because the posts contain separate digital elements. Some graphics are available for you to download and use in your own creations. There are also many poster designs here too, and I enjoy experimenting with Wordart.";
}

    That code will display it on the page like this, as long as you change your category name as well:

    https://cloudup.com/cnJCn2FP0lv

    Then you can add:

    .category-1234567 .archive-title::after {
	content: "YOUR CONTENT";
}

    Changing the category number and content for each of your categories.

  • Unknown's avatar
    justpi · Member ·

    This:

    DIGITAL ART COLLECTION: Featuring Posters, Graphics, Typography, and other Digital Artwork.

    Where a greeting card is shown in this category it’s because the posts contain separate digital elements. Some graphics are available for you to download and use in your own creations. There are also many poster designs here too, and I enjoy experimenting with Wordart.

    is also possible, without making the actual category names that long. But please explain: should the whole first line be bold, or only the capitalized part of it?

  • Unknown's avatar
    uniqueartchic · Member ·

    Hi yes id like the title and the ‘featuring’ to be in bold. Sorry like this.

    DIGITAL ART COLLECTION: Featuring Posters, Graphics, Typography, and other Digital Artwork.

    Where a greeting card is shown in this category it’s because the posts contain separate digital elements. Some graphics are available for you to download and use in your own creations. There are also many poster designs here too, and I enjoy experimenting with Wordart.

  • Unknown's avatar
    justpi · Member ·

    Remove these: 

    .category .archive-title {
    font-size: 0;
}
.category .archive-title em {
    font-size: 20px;
}
.category-30681325 .archive-title:after {
}

    Then add these (once): 

    .category .archive-title {
font-size: 0;
margin-top: 66px;
text-align: left;
}
.category .archive-title:before {
display: block;
font-size: 18px;
font-weight: bold;
}
.category .archive-title:after {
display: block;
font-size: 16px;
text-transform: none;
}

    And these, as many times for as many categories: 

    .category-NUMBER .archive-title:before {
content: "BOLD TEXT HERE";
}
.category-NUMBER .archive-title:after {
content: "DESCRIPTION HERE";
}
  • Unknown's avatar
    uniqueartchic · Member ·

    Hi, Ive been trying to input the css you gave me above. I started with menu item ‘All Things Crafty” But its not showing up. Ive tried a few times. Do you know what might be wrong?

    Thanks Amanda

  • Unknown's avatar
    justpi · Member ·

    All I can see in your CSS is that there’s no trace of the last two pieces of code I suggested – as if you forgot to save after adding them. So the only thing I can say is try again.

  • Unknown's avatar
    uniqueartchic · Member ·

    Oh thats strange. They’re present for me on the css.

    I followed the instructions to remove the codes, and then added the codes once. I then added one of the menu items – all things crafty in the way you described.
    Is it possible to send you a screen shot?

    Thanks Amanda

  • Unknown's avatar
    justpi · Member ·

    To show us a screenshot you upload it to your blog via Media > Add New, and once its uploaded you click Edit, copy the image URL from the File URL field of the Save module, paste the URL here.

    But you don’t have to do this: I can see your CSS. It’s just that before my previous reply I inspected only that particular category title. Now I realized you must have pasted something that doesn’t apply to that title, and checked the rest of your custom CSS. This is what you’ve entered: 

    .category-1888629.archive-title:before {
    content: “ALL THINGS CRAFTY: Featuring: Traditional hand-made crafts.";A}A.category-1888629.archive-title:after {Acontent: “When I do have the chance to get crafty, I love learning new skills and techniques. Crafts are great fun to do with friends too. :";
}

    That’s not an exact reproduction of the model I gave you, and it’s not valid: there’s no space after the category number, there are three mysterious As that shouldn’t be there, and a couple of the quotation marks are oblique instead of straight. Correct version: 

    .category-1888629 .archive-title:before {
content: "ALL THINGS CRAFTY: Featuring: Traditional hand-made crafts.";
}
.category-1888629 .archive-title:after {
content: "When I do have the chance to get crafty, I love learning new skills and techniques. Crafts are great fun to do with friends too.";
}

    When we suggest some code, don’t copypaste it into Word or anything like that: copypaste it straight from here into the CSS editor.

  • Unknown's avatar
    uniqueartchic · Member ·

    You are an absolute star! Thank you so much. I’m loving how the blog looks now.

    I had copied the css into a word document so perhaps thats why it went a bit funny. But its all there now thanks to your patience with me.

    Excellent work and please give my thanks to all your colleagues who helped me out here. :)

    Thank you Amanda

  • Unknown's avatar
    justpi · Member ·

    You’re welcome!

    On the line that says margin-top: 66px you can change the number to decrease the space between the menu and the text.

    As for colleagues”, notice it says Member under my username, just like it says under yours: I’m not WP staff, I’m an experienced fellow blogger volunteering (which makes thesaredpath an internet teacher and friend rather than a colleague).

  • Unknown's avatar
    uniqueartchic · Member ·

    Well thats amazing! I would love to have the knowledge to help people out like that. I cant thank you enough, and everyone else who helped me out here.

    Thanks also for that last bit of code. I had thought the space looked too great, but didn’t like to be too fussy and ask yet another question. :)

    Best wishes Amanda

1 2
  • The topic ‘Change feature image size css’ is closed to new replies.