Requested: Header Coding for Flexible Squares

[sireesanwar]

Requested by: prinngles

Works in most layouts but requested for Flexible Squares.

• You will want to go to Custom CSS in your Customize Journal Theme section.
• Answer the following Questions
  
  • Use layout's stylesheet:
  • Yes: You are keeping the basic look of Flexible Squares (or other theme) and just want to add the header.
  • No: You are trying to put together a custom layout.
  • Use layout's stylesheet when including custom external stylesheet:
  • Yes: Only if you are a PAID account holder that is using a Custom Theme Layer to control the look of your layout.
  • No: if you are a FREE or BASIC user or if you do not wish for your layout to be controlled by your Custom Theme Layer.
  • Use external stylesheet:
  • Yes: If you are a PAID account holder with a Custom Theme Layer or customizations in the Theme Layer section (you do not have to have this control your entire layout - no above)
  • No: FREE or BASIC user. If you are PAID and are not using the Custom Theme Layer option at all mark this no.
• Insert Below Code

.headerimage {
position: relative;
border-color: #555555;
border-style: solid;
border-width: 1px 1px 0px 1px;
width: 700px;
height: 250px;
padding: 0px 0px 0px 0px;
margin-left: auto;
margin-right: auto;
margin-top: 1px;
background-color: #000000;
background-image: url(IMAGE URL HERE);
background-position: center;
background-repeat: no-repeat;
}

Things that can be changed:

• border-color: #555555; If you don't want the image to have a border color you can remove this line of make it match the background color (also see border-width).


• border-style: solid; if you change the word solid to dashed or dotted you get a different border effect. If you remove the border color because you don't want a border you can remove this line as well.


• border-width: 1px 1px 0px 1px; rather than deleting the border-color line and the border style line you can make all these 1 a 0 and no border will show up. Their order is Top, right, bottom, left (1px 1px 0px 1px)


• width: 700px; always best when the width in the coding matches the actual width of your image and/or layout.


• height: 250px; always best when this is the height of your image.


• padding: 0px 0px 0px 0px; These move your image over or put some space between your journal, the sides and header. If your image is exactly height and width you shouldn't need to use this line. Their order is top, right, bottom, left (0px 0px 0px 0px)


• background-color: #000000; This is the color that appears behind you image while the image is loading. You can change this #color code to match your journal's background color or replace "#000000" with "transparent !important". The !important is usually necessary to force the transparency.


• background-image: url(); in the ( ) you will put the Direct Link from a PhotoBucket account (or whatever image place you use).