Parsons • Digital Photo + Video • Summer '18

0

Custom CSS & PLUGINS: Customize your ELP

.
PLUGINS:

I thought before showing you the CSS I’d give you a list of other plugins in which you may be interested, including “Custom CSS,” which you need in order to make any changes to your ELP’s CSS (header color, etc).

  • Custom CSS
  • Scheduled Content
  • WP-ContactForm
  • Duplicate Post
  • Live Shortcodes
  • Podcasts (only for fun if you’re into that…)

CUSTOM CSS

First, to get the Custom CSS window, you have to add it as a plugin. Once you find it inside “Plugins,” install it and then click on it at the bottom of the “appearance” menu at the left.

Here’s the crazy looking new blog that I made using the Parsons theme—pretty unrecognizable as that theme, however, as I thought that would be particularly helpful—I wanted to show you how far you can go.

If you would just like to change the color of the header and footer, just paste the following into your Custom CSS box. Make sure you keep the # there, but you can change the 6 digit hex value to whatever you’d like. You may not have worked with hex values before, but if you click on a color inside photoshop, it’ll give you the hex value at the bottom of the color info window:

#header {

background-color:#e79283;

}

#footer{

background-color:#e79283;

}

Below you’ll find the custom CSS I used to customize that crazy looking ELP. Paste all that I have below into “custom CSS” so you can read what’s commented out and what’s not. Everything in grey is a comment. Everything not in grey (without /****** and without ******/) is real CSS code. I just wanted to explain all that I’d done… It’s fine to have the commented out stuff in there. No need to remove. You can paste all that in and customize as you wish.

/******** I have comments that explain what I did above each piece of CSS ********/

/********

#header is the background color or background image—that’s what’s commented out below—of the main top header bar. It was black and I made it the below pink color (hex value: #e79283). Plus I gave it a huge crazy 8px border in color: #f9b237.

********/

#header {

/* background: url(“URL_GOES_HERE_TO_IMG”); */

background-color:#e79283;

backgrond-repeat:repeat;

border:8px solid #f9b237;

}

/********

#footer: very similar to the header. It was black and it’s the big box at the very bottom.

********/

#footer{

/* background: url(“URL_GOES_HERE_TO_IMG”); */

background-color:#e79283;

backgrond-repeat:repeat;

border:8px solid #f9b237;

}

/********

#search-nav input[type=”search”]: This is the search box at the upper right. Was black. I made it yellow (#ffc039) with white text on it. Also, I made the text uppercase and aligned left for that upper right search box.

********/

#search-nav input[type=”search”] {

background: url(“./images/search-light.png”) no-repeat scroll 96% center #ffc039;

color: #FFF;

text-transform:uppercase;

text-align:right;

}

/********

#navigation .sf-menu a — This is the color of the menu text. It was grey, but I made it the color below (hex value).

********/

#navigation .sf-menu a {

color: #71440a;

}

/********

current-menu-item > a This is the color of the background of the menu rollover box (pink).

********/

#navigation .sf-menu > .current-menu-item > a {

background: #ad670c;

}

/********

ul li > the submenu box color

********/

#navigation .sf-menu ul li {

background: #a44c3c;

}

/********

a:hover > the hover background color

********/

#navigation .sf-menu ul li > a:hover {

background-color: #ae6457;

}

/********

#footer input[type=”search”] This is the footer search bar. I also made the text uppercase here.

********/

#footer input[type=”search”] {

background-color: #ffc039;

border-color: #ffc039;

color: #FFF;

text-transform:uppercase;

}

/********

#page-heading This is the text box with the subheading/page heading—like if you click on “Integrative Studio Final Projects” in the menu, it then shows an orange box with pink text and border that says, “I.S. FINAL PROJECTS.” I made that pink with an orange border. Also, I raised it up 15px because I thought it was ugly.

********/

#page-heading {

padding: 3px;

background: #f9b237;

border:8px solid #e79283;

margin-top:-15px;

}

/********

##page-heading h1/h2 This is the color of the text in the box above. It was black so I had to change.

********/

#page-heading h1, #page-heading h2 {

color:#ae6457;

}

/********

#blog-entry This is the box on the front that previews the posts. So front shows 3 of them. Had to make them slightly more narrow to allow for the border. .

********/

.blog-entry {

margin-bottom: 30px;

margin-right: 30px;

border:8px solid #e9afa4;

width: 284px;

height:550px;

}

/********

#page-featured-img img If you click into an entry, I added a pink border to the big image above the post. It was way too big so I made it slightly smaller to account for the border (98.5% wide).

********/

#page-featured-img img {

display: block;

width: 98.5%;

border:8px solid #e79283;

}

/********

#single-post-content This is the text below the big featured image. I added an orange border to it and made it smaller to account for the border (91.5% wide).

********/

#single-post-content{

width: 91.5%;

margin-left:auto;

margin-right:auto;

border:8px solid #f9b237;

}

/********

#@media only screen and (max-width:959px) This is a media query. Basically, when the screen minimizes (like for ipad or phone), it was still showing the red navigation box. I changed it to pink..

********/

@media only screen and (max-width:959px) {

#navigation {

background: #ae6457 url(“../images/responsive-nav.png”) right center no-repeat;

}

}

Skip to toolbar