Need help? Check out our Support site, then


Change feature image size css

  1. Hi,
    I'm using Hatch theme, which displays landscape images on the home page.
    My problem is I use both portrait and landscape feature images. The only ones that look good on the home page are the landscape images. At the moment I am having to physically redesign portrait images to prevent them being cut off. This takes me a huge amount of time.

    I would like the ability to have portrait images displayed on the home page as i intended and not be cut off, whilst also keeping landscape when needed.

    I have just purchased the upgrade. Is there a css code that will allow me to change the size of the feature image?

    Many thanks

    The blog I need help with is uniquesochic.com.

  2. Hi there, the image sizes and proportions are set by the theme so that a clean grid arrangement can be displayed, and there is no way to change that cleanly with CSS.

    You may want to take a look at some other themes. Triton Lite would display landscape images better, and we could help you with the CSS to hid the post excerpt and title below the images so that it would just display the images on the main pages.

    I might suggest creating a test site here set to private, upload some images and create some quick posts and then you can try out Triton Lite, or perhaps some other photography and portfolio style themes.

  3. uniquevintagechic
    Member

    Hi,
    Thanks for the advice. I have activated Triton Lite and I like it. I don't like the sidebar on all the posts though, I prefer my posts uncluttered, do I have to use one?

    I would appreciate the css code for your suggestions above. Also on the home page, it almost seems as if there is a opaque film over it, would removing the excerpts help with that?

    Thank you for your help :)

  4. uniquevintagechic
    Member

    Hi, bit of an update.

    Ive sorted the sidebar issue, but only by removing all widgets from it so it doesn't show. I do like to use a sidebar on pages so if theres a way to do that i'd be grateful.

    I think the slight opaque look on the home page is to do with the date and comments that pop up when you hover over the post. Can i remove those please?

    I actually find I don't mind showing a bit of an excerpt, but would still also like the css code for showing a bit less of it.

    Thank you

  5. Hi, I do apologise i just realised I've been replying from my other site, (uk vintage chic) I was signed in and didn't notice.

    The above comments still apply though.

    Thanks

  6. Hi,

    Just exploring and ive found a site using triton lite theme that looks just how i want mine to be. http://loosegroupartists.com/

    I would like to set the menu below the header as on that site, the colour block looks great, and really shows up the menu.
    I would also like to show my descriptions of my categories.

    Could you let me have the CSS code to do those things please? in addition to my other questions above re removing the hover date, and sidebar issue.

    Thankyou

  7. Hi there, yet another update

    By looking through the forum ive found a few CSS codes which ive tried. I now have the menu under the header, and got rid of the opaque, but there are a few issues which I cant seem to solve, and I would really appreciate your support.

    There is a blue band at the top of the site, and the header is a little high -
    The blue band should be with the site intro.

    The spacing between the posts, menu and the header and site intro needs to be in proportion.

    I cant seem to change the colour of the menu items and the site intro is in capitals.

    I need help with showing the description within my categories.

    I would like to know if i can use a sidebar just in pages.

    Many thanks :)

  8. Where exactly do you want the blue line? Above or below the site title/description? To put it between the header image and site title, you add a border top to #logo. If you want it below the site description, add a border bottom. I included both a top and bottom below and you can delete the one you do not want. If you want a bottom border, you will have to add about 40px to the "top" value in #access to space the menu down a little also.

    #masthead {
        background: none;
    }
    
    #logo {
        border-bottom: 10px solid #B4DEDC;
        border-top: 10px solid #B4DEDC;
    }

    Remove all caps from site title:

    #logo h1 a {
        text-transform: none;
    }

    I see you have several rules in your CSS for the menu and menu colors. Are you still wanting to change some stuff?

    On the widgets/sidebar, you have control over what widgets show where, and since Triton will hide the sidebar if widgets are not present, you can use the widget visibility feature to set the widgets to only show on pages.

  9. Hi,

    I have only copied & pasted what I saw in the forums, as I have no knowledge of css, so I would imagine those are the colours that were in that code.

    I like the colour of the menu items, but I want the hover on these to be the orange red as on the post titles and not blue as it currently is.

    The css code you gave me for the blue border moved it, but it was too long for some reason so i set the value to 0 so it didn't show at all.

    Im not sure if doing this has altered the spacing between the posts as some of the 'read more' are squashed up, and some cant be seen fully.

    I would prefer the 'read more' to have a translucent block around them if possible.

    I would still like help to include the description I have written for each category. As you can see I use categories for my menu, I had this on the Hatch theme and its nice to have an introduction to categories.

    The remove all caps from site title doesnt seem to work, not sure why? I would also like the orange/red post titles on the home page to be lowercase.

    Thanks for the widget visibility info, ill look at that.

    Thank you so much for your help - I really appreciate your support. :)

  10. In your custom CSS, find the following selector and in the color declaration change the color from #0099FF to #DD1111.

    #access li:hover > a, #access ul ul *:hover > a

    For the blue border thickness, you can change it to whatever thickness you want. Replace 0 with 1px and then change that until you get the thickness you desire.

    The read more issue was cause be custom font settings, but you can add the following CSS to fix that. The background declaration uses a black color, but sets it at 0.1 opacity. The first three numbers, 0, 0, 0, set it to black (RGB colors). You can play with the last number 0.1 to adjust the amount of transparency. 1 would be completely opaque and 0 would be completely transparent.

    .lay1 > div .read-more {
        width: 85px;
        padding-top: 4px;
        padding-bottom: 4px;
        background: rgba(0,0,0,0.1);
    }

    Interesting on the logo. It works fine in my test blog, just as I gave it to you with Triton Lite. I tried this directly in your custom CSS and it works, so add the following and save. Since you are using a custom font, it might take a couple minutes for it to change. It did for me. I added the !important attribute just to make sure.

    #logo h1 a {
    	text-transform: none !important;
    }
  11. Hi there,

    Im struggling with that blue line, it wasnt so much the thickness, it was the length was wrong. but I think the site looks fine without it. Instead maybe it would be better if the menu was on top of the blue instead of the grey. What do you think?

    just another couple of issues left, hope you dont mind me bugging you.

    - I really want to show category descriptions, like I had with hatch theme.

    - I also think the space between the header and menu is a bit too much, can this be reduced?

    - The caps have now gone from the title... Can i also change the tagline & post titles to remove caps too?

    - Also is it possible to have a site introduction? or does this theme only support a tagline?

    Thanks you so much you're amazing! :)

  12. I have a question about the menu, which is using 2 rows. Is it possible to separate the menu items? e.g have my web-links on the top line and my categories on the bottom line?

    Thanks

  13. Hey Amanda,

    I really want to show category descriptions, like I had with hatch theme.

    Where did the Hatch theme display the category descriptions? I've had a look, but can't seem to find where it displayed them.

    I also think the space between the header and menu is a bit too much, can this be reduced?

    In your custom CSS, add this line:

    #header-image { margin-bottom: 0; }
    
    #logo { margin-top: 0; }

    On line 28 of your custom CSS file you'll see this:

    #access {
    	background: #efefef;
    	border: 1px solid #ccc;
    	border-width: 1px 0;
    	margin: 0 auto 1.8em;
    	padding-left: .9em;
    	z-index: 99;
    	position: absolute;
    	width: 938px;
    	top: 430px;
    }

    Change the top: 430px number to 370px.

    On line 126, you'll see this:

    #header {
    	border-bottom: 0 none;
    	height: 500px;
    }

    Change the height to 400px and it should reduce the space between the header and menu areas.

    The caps have now gone from the title... Can i also change the tagline & post titles to remove caps too?

    Yep, you can do this by adding the following code to custom CSS:

    .desc, .lay1 > div .postitle a { text-transform: none; }

    Is it possible to separate the menu items? e.g have my web-links on the top line and my categories on the bottom line?

    Not in this particular theme, unfortunately. The menu will wrap onto a new line once it's too long to fit on one, but there isn't anything that can be done to control it.

    I hope all this helps!

    Don't forget to take a backup of your custom CSS file before making any changes, just in case they don't work as expected. :)

  14. uniquevintagechic
    Member

    Excellent! Ive applied all the changes and its looking great! Im so pleased I swapped from Hatch, since all my feature images now look as they were intended.

    On my blog I use categories within my menu. If you click on one, you'll see it says "Category Archive e.g Photo Challenges." On Hatch the description of the category showed right there.

    I hope you can help, as I think the category introduction was important. I would like the introduction to appear at the top, get rid of the word 'Category Archive' and just have PHOTO CHALLENGES - followed by the description.

    Thank you so much i love my blog! :)

  15. uniquevintagechic
    Member

    One other thing I've just thought of. Ive noticed that when i look at my blog on my work computer 'windows' Internet explorer. The opaque look is present again. Is there something i could add for that?

    Thanks Amanda

  16. uniquevintagechic
    Member

    Sorry I've just found another problem since i applied the css.

    Within an actual post, the post title is half hidden by the menu bar. Could you have a look please?

    Many thanks

  17. Sorry I just realised ive been replying as my other blog again! Were still discussing Unique So Chic. LOL :)

  18. a) One way to correct the spacing on static pages and single posts:

    #posts .post-content {
    margin-top: 55px;
    }

    b) Re category descriptions, see older replies of mine:
    http://en.forums.wordpress.com/topic/remove-just-the-category-archive-bit-from-triton-lite?replies=10

  19. Thank you I sorted the spacing out. These are the issue I still need help with:
    "Where did the Hatch theme display the category descriptions? I've had a look, but can't seem to find where it displayed them."

    On my blog I use categories within my menu. If you click on one, you'll see it says "Category Archive e.g Photo Challenges." On Hatch the description of the category showed right there.

    I hope you can help, as I think the category introduction was important. I would like the introduction to appear at the top, get rid of the word 'Category Archive' and just have PHOTO CHALLENGES - followed by the description.

    Ive noticed that when i look at my blog on my work computer 'windows' Internet explorer. The opaque look is present again. Is there something i could add for that?

    Thanks so much for your help :)

  20. On my blog I use categories within my menu. If you click on one, you'll see it says "Category Archive e.g Photo Challenges." On Hatch the description of the category showed right there.

    Ah, I see what you mean. That's build into the Hatch theme and isn't something you'll be able to add into Triton Line, directly.

    As Panos just posted though, it is something you can do by using some CSS to manually add your descriptions is. So, for example, for your Digital Art & Graphics category you could do this:

    .category-30681325 .archive-title:after {
        content: "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.";
    }

    You'd need to do that for each category. To get the ID of the category you can go to Posts > Categories and click the name of the category you want. In the URL you will see &tag_ID=30681325. Take that number and add it to .category-

    Then you can use this code to display the titles how you like (might need tweaking to taste):

    .category .archive-title:after {
    display: block;
    font-size: 16px;
    }

    One other thing I've just thought of. Ive noticed that when i look at my blog on my work computer 'windows' Internet explorer. The opaque look is present again. Is there something i could add for that?

    Some older versions of Internet Explorer don't handle transparency, so this is probably why.

    I hope that helps :)

  21. 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.

  22. 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.

  23. 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?

  24. 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.

  25. 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";
    }
  26. 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

  27. 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.

  28. 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

  29. 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.

  30. 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

Topic Closed

This topic has been closed to new replies.

About this Topic