Need help? Check out our Support site, then


CSS changes to Ever After

  1. Hello - my love and I are building a web page / blog for our wedding, and using the Ever After theme (now almost unrecognisable!)

    I've got the CSS upgrade, and have found solutions to many of our probs - but there are a few things I can't quite fathom. It would be ace if someone were able to help: (http://www.projectlovely.com)

    - we've set the landing page to be static (about), and essentially want the jpeg/image inserted into the page to appear as the landing page. However, there is currently a white border round the image (only on the published page, not when you actually upload the image) and a drop-shadow. How do we remove both the white border and drop shadow?

    - we'd like to change the weight and colour of the horizontal lines which appear above and below the menu: where in the css would we find the relevant code?

    - is there a way to change the font colour and type across all pages and posts?

    Thanks so much for any help you can give us - and don't judge too much on appearance right now! We're building the skeleton, then tweaking the design.

    The blog I need help with is projectlovely.com.

  2. Congrats!

    How do we remove both the white border and drop shadow?

    To remove the border, padding, and shadow from any images in the content area on the home page, you could add something like this:

    .home .entry-content img {
    	border: none;
    	padding: 0;
    	box-shadow: none;
    }
  3. - we'd like to change the weight and colour of the horizontal lines which appear above and below the menu: where in the css would we find the relevant code?

    Instead of reading through the theme CSS, I usually just right-click on the element in my browser and click the "Inspect Element" option to see all of the CSS that applies to what I clicked on. Then I click through the breadcrumb list of CSS or the HTML in the web inspector until I find the rule I'm looking for (i.e. a border rule in this case). I did that for the Ever After theme, and I found that this CSS will hid the border from around the main menu:

    .site-navigation {
    	border: none;
    }

    Note that you need to have an updated web browser to use web inspector tools. Make sure you are using the latest stable version of web browser:
    http://browsehappy.com/

    If you would prefer to read the CSS directly, you can find the link to your theme's CSS by clicking "Edit" next to "Mode: Add-on" on your Appearance → Custom Design → CSS page.

  4. - is there a way to change the font colour and type across all pages and posts?

    Yes, but how to do it depends on your theme and how many color rules it may or may not have for different text. For example, this will change the base font color to red:

    body {
    	color: #f00;
    }

    But any time the theme sets a different color for a heading, a sidebar heading, a link, a menu link, a menu hover link, etc., etc., you would need to add a rule for each one. It's not as scary as it sounds, but it does take a little work.

    As a first step, I would recommend starting out by setting a color palette on the Appearance → Custom Design → Colors page to try to get the closest possible to what you want and then just make small edits from that point using CSS. I see that you've already figured out how to modify the menu links by adjusting the links in the ".main-navigation" area, and that's exactly what you need to do for any area that the theme has set colors for.

Topic Closed

This topic has been closed to new replies.

About this Topic