Customize Edin Theme with CSS

  • Unknown's avatar
    panafricanuniversitypress · Member ·

    I’m using the Edin theme for my site, however I’m having problems changing some of the styles of the Edin theme.

    For example, my logo has a class of .site-branding and the Edin theme has set a certain max-width on that class depending on the size of the browser window. I want to change it to different max-width or take out max-width from the class. However, it’s something that I can’t change since it’s probably did it in javascript.

    Is it impossible to fully change the Edin theme? Or can you can only change the basic CSS styles? Or am I missing something?

    I’m helping someone with the site and I have the admin power of the site but I’m new to wordpress.com.

    I’m in charged of changing the styles of the site and currently I’m just using chrome’s developer tool to look at the elements and using the wordpress.com css editor to change the styles.

    Is there a better way of doing this? Thanks!

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    marioashley · Member ·

    Does Custom Design let me edit HTML?
    No. Custom Design allows you to add or replace CSS for WordPress.com themes; it does not give you access to change HTML markup or PHP code.

    Read more here: https://en.support.wordpress.com/custom-design/custom-css/

    Hope that helps

  • Unknown's avatar
    thesacredpath · Member ·

    @panafricanuniversitypress, we can increase the size of the logo and/or replace it with an image using custom CSS. The issue with enlarging what you have is that WordPress and the theme software actually creates the image in the size you see, so if we enlarge the current image, it is going to lose sharpness and quality.

    If you let us know how much larger you want the image, and if the image you have on your site now is the one you want to use, we can work out the code for you. Currently the image is 583px by 150px.

  • Unknown's avatar
    panafricanuniversitypress · Member ·

    Sorry for the late reply, but I have a question about changing the featured image (brown background)

    Currently, the home page has a featured image of height 697px with the classes hero and with-featured-image. While the other pages has a featured image of height 407px with the same classes.

    I’m just wondering how I would change the height of a certain page, without changing the height of all the pages?

    For example, I want the home page to have a height of 500px instead but I want to keep the height of 407px for all the other pages. How would I do that?

    Thanks!

  • Unknown's avatar
    thesacredpath · Member ·

    Hi, with themes here at WordPress.com, there are some special CSS classes that are added to the opening body HTML tag that we can use to target styling to individual pages, or types of pages (categories, archives, etc.). You can visit a page that you want to modify separately and use the web inspector in your browser to find those CSS body classes. As an example, looking in the pane on the web inspector for your home page, you will see this in the opening body HTML tag
    <body class="home page page-id-45...
    Notice the “home” and the page-id-45? Those are two of the body classes we can use to target styling to your home page. Since those are CSS classes, in the CSS you need to precede those with a period ( . )

    The height of the area where the featured image is, is actually set with top and bottom padding of 180px in .hero.with-featured-image, so, to make the featured image on your home page only 500px tall, we would add the following to your custom CSS and then adjust the top and bottom padding to get the height you want. Since there isn’t an actual “height” set for it, I would suggest just decreasing the padding from its original 180px top and bottom to where it looks the way you want it. 80px would give you about 500px in height. 

    .page-id-45 .hero.with-featured-image {
    padding: 80px 0 !important;
}

    If you are not familiar with the web inspector in your browser, take a look at our support page on How to Find Your Theme’s CSS where you will find some brief screencasts to get you started with it. I find it an invaluable tool when working with CSS.

  • Unknown's avatar
    panafricanuniversitypress · Member ·

    Thanks for the answer, that helped me a lot.

    I’ve one more thing that I’m having trouble with.

    I want to add the fabric header that has the with-featured-image class
    i.e. this page’s “PAUP Publications” background

    http://panafricanuniversitypress.com/pan-african-university-press-publications/

    to this page and to the rest of my POST so they will have a fabric header with that background image.

    http://panafricanuniversitypress.com/category/press-news/

    http://panafricanuniversitypress.com/2015/09/12/review-on-wings-of-light/

    How would I do this?

    Thanks again for answering all of my questions.

  • Unknown's avatar
    thesacredpath · Member ·

    I want to add the fabric header that has the with-featured-image class
    i.e. this page’s “PAUP Publications” background… to this page and to the rest of my POST so they will have a fabric header with that background image.

    I may not entirely understand what you are wanting. You can add the same featured image to multiple posts and pages so they would all have the same header image.

    For categories pages, such as Press News, we would have to add the image using CSS and we can do that by using the unique category CSS class that is set in the opening body HTML tag for that page. This would be for Press News. 

    .category-press-news .hero {
    background-image: url("https://panafricanuniversitypress.files.wordpress.com/2015/07/yoruba-studies-fabric-2.jpg?w=800&h=533&crop=1");
    color: #fff;
    padding: 120px 0;
}

    You can use the above as a guide and add the selectors for the other categories pages you wish to have this image on by comma separating them like this. 

    .category-press-news .hero, .category-nother .hero, .category-another .hero {
    background-image: url("https://panafricanuniversitypress.files.wordpress.com/2015/07/yoruba-studies-fabric-2.jpg?w=800&h=533&crop=1");
    color: #fff;
    padding: 120px 0;
}
  • The topic ‘Customize Edin Theme with CSS’ is closed to new replies.