New to .org and CSS – several questions

  • I am in the process of optimizing my laboratory website at seiplegroup.ucsf.edu using www.remarpro.com. I previously used wordpress.com to host the site (seiplegroup.com), and recently transferred to the new domain and the .org framework.

    I have Jetpack installed, and have activated custom CSS, but have no idea how to use it so far.

    I’ve got several things I want to happen on the site, so I will post all of them here. I completely understand if you only have the bandwidth to answer one or two of these–any help is appreciated!

    1. The thumbnails on the Home page were automatically cropped and resized on my wordpress.com site using the Edin theme (see seiplegroup.com), but on the new domain using the .org framework does not automatically crop the images. I know about Post Thumbnail Editor, but have not yet attempted to use it. What is the best way to edit these featured images on the home page?

    2. How do I get rid of the “Read More” button underneath each of these featured page images, and retain the link and mouseover effect on the images?

    3. I would like to change the height (make it smaller) of the featured image on each page, especially the home page, so that the content has a little bit more room to breathe before the user scrolls down.

    4. WordPress.com had a “font” option to change font and font size in the Customize menu. I used Ubuntu and was happy with it. This option is absent on the self-hosted site–what do I need to do to get it back?

    5. Similarly, the .com Customize page had more options in the Colors menu. In the .org framework, I can only choose the Background color (not the link color, etc). Is there a way to gain this functionality back, or a way to change the link and mouseover colors in the menu?

    OK I think that’s quite enough to start. Thanks ahead of time for your responses!

Viewing 2 replies - 16 through 17 (of 17 total)
  • Thread Starter IanBS

    (@ianbs)

    I think I would just prefer the text to only have small borders on the top and the bottom within the image. As it stands, the top border is very large, and changing the height: XXpx seems to only change the bottom border, but not the position of the text relative to the top of the image.

    Moderator Kathryn Presner

    (@zoonini)

    My colleague Richard (sacredpath) aptly noticed that there is another piece of CSS in Edin that’s adding 180px of padding above and below the homepage content:

    .hero.with-featured-image, body[class*="front-page"] .hero {
    padding: 180px 0;
}

    That’s getting applied to this div, only on the front page:

    <div class="hero with-featured-image”>

    To override that this, you an try something more like this to reduce the amount of padding above and below the text in the homepage hero area:

    @media screen and (min-width: 1230px) {
  .hero.with-featured-image .has-post-thumbnail {
   height: 250px;
  }
  .hero.with-featured-image, body[class*="front-page"] .hero {
     padding: 20px 0 20px 0;
  }
}
Viewing 2 replies - 16 through 17 (of 17 total)
  • The topic ‘New to .org and CSS – several questions’ is closed to new replies.

Tags