04/01/2016

Planet eStream Advanced Theming / Custom CSS

homeicon_1
print11
Older Posts
Planet eStream Advanced Theming / Custom CSS

Planet eStream gives users the ability to add custom CSS code to their themes. This allows extensive alterations of some of the visual elements in eStream that cannot be configured elsewhere in the theme editor. Users are free to experiment using this feature, but if you’re unfamiliar with CSS, it could be difficult to accomplish these customisations. This guide contains some custom CSS examples that you can apply to your eStream site either as they are, or with alterations to suit your needs. Making your own changes to the code in this guide and applying that to your theme is done at your own risk; we recommend creating a new theme to experiment with rather than editing one of the defaults, and when you’re happy with your changes, applying that to the desired theme.

Follow these steps to access the CSS editor in eStream.

  1. Go to Tools in the top navigation bar and select Admin
  2. Select Theme Editor under the Interface Options heading.
  3. Select Open and choose the theme you wish to apply the custom CSS code to.
  4. Open the Custom CSS tab

You will then see two large, empty boxes in which you can paste custom code. The first box will apply your style across the whole site. The second box will allow you to edit the login page only. Copy all of the code listed for your desired implementation and paste it into the appropriate box, and finally click the Save/Update button.

To add multiple alterations, all you need to do is paste the code below the previous code entered, on a new line.

PLEASE NOTE: Some alterations will not work alongside others; for example, you obviously can’t have both a thinner and thicker navigation bar at the same time. Any templates that would interfere with others have a note at the bottom of their respective pages.

Making your own CSS customisations

The examples found in this guide are only templates you can use to quickly and easily insert customisation into your eStream site. You could also experiment with changing some of the values in these templates to create your own, unique style – for example, the thicker banner sets the banner height to 1920x420 pixels in size. You could change this to make the banner 1920x600 pixels in size if you wanted an even bigger one.

The best way to get started in learning some basic CSS would be to follow an online guide or tutorial, such as the one found HERE which teaches some basic syntax, as well as demonstrating how it is used in practice. You’ll notice that the post describes selectors, or the elements within a page that you wish to change. The easiest way to find which selector you need would be to use the element selector tools built into browsers.

By pressing F12 while your browser is active, you’ll open the developer tools window. This may look different depending what browser you’re using, but generally the tools available are the same. The table below shows which tab needs to be open depending on your browser:

Clicking the inspector button once will enable you to move your mouse around a web page and see the elements that make up the page highlighted. This makes it quite easy to find the exact element you’re going to need to change. When you click on one of these elements, you’ll be taken to the appropriate section of HTML code in the inspector window; this is essentially the whole web page as it would appear in HTML.

Mastering which elements need to be selected in CSS code can be tricky, as elements are nested within other “parent” elements. When writing CSS code, you need to be quite specific with which element you are making changes to, by selecting the exact item using a chain of selectors, as shown here:

.topnavbutton.right > a > div {
margin-top: 2px;
}

The code above would not have the intended effect if the a and div elements were not specified, as the margin-top property would instead change the topnavbutton.right element as a whole, rather than its child elements.

A useful reference for CSS selectors can be found here:
http://www.w3schools.com/cssref/css_selectors.asp
CSS properties reference:
http://www.w3schools.com/cssref/
Using the “nth child” in selectors (useful for selecting very specific elements):
http://nthmaster.com/

Custom CSS Templates

Thinner Navigation Bar
Thicker Navigation Bar
Remove Category Icons
Remove Header Text Bar
Search Results Page Number Text Colour
Items in Pages Text Colour
Larger Category Icons
Smaller Category Icons
Remove Category Titles
Custom Background Image
Custom Navigation Bar Background Image
Thinner Banner
Thicker Banner
Modify Gap Between Widgets

Thinner Navigation Bar

Before

After

Code

.topnav > div:nth-child(-n+15) > a > svg {
top: 0px;
}
.topnav > .topnavsearch {
padding-top: 6px;
}
.topnavlogo > a {
height: 50px;
}
.topnavlogo > a > img {
width: 120px;
height: 53px;
}
.topnav > div {
height: 50px;
}
.topnav > div:nth-child(odd) {
height: 50px;
}
.topnav > div:nth-child(even) > a {
max-height:50px;
height:50px;
}
.topnav > div:nth-child(even) > a > div {
font-size: 80%;
margin-top: 0;
}
.topnav > div:nth-child(even) > a > svg {
height: 25px;
width: 25px;
}
.topnav > div:nth-child(even) {
line-height: 15px;
}

Note: You may only use only either the thin or thick navigation bar. Entering the CSS code for both will bring unexpected results.

Thicker Navigation Bar

Before

After

Code

.topnav {
max-height:100px;
height:100px;
}
.topnav > div:nth-child(-n+15) {
height: 100px;
}
.topnav > div:nth-child(-n+15) > a {
height: 100px;
}
.topnav > div:nth-child(-n+15) > a > svg {
top: 22px;
}
.topnav > div:nth-child(-n+13) > a > div {
margin-top: 19px;
}
.topnav > .topnavsearch {
padding-top: 30px;
}
.es-user-icon-navbar {
margin-top: 20px;
}
.topnavbutton.right > a > div {
margin-top: 2px;
}

Note: You may only use only either the thin or thick navigation bar. Entering the CSS code for both will bring unexpected results.

Remove Category Icons

Before

After

Code

.es-page-header-basic > div > div:nth-child(1) {
display: none;
}
Remove Header Text Bar

Before

After

Code

.es-page-header-graphic > div > div:nth-child(1) {
display: none;
}
Search Results Page Number & Items in Pages Text Colour

Before

After

Items in Pages Code

.es-paginationtotals {
color: #a80909;
}

Results Page Number Code

.es-pagination-container > div > ul > li > a {
color: #a80909;
}

Note: Replace #a80909 with your desired colour. You can use sites like http://www.colorpicker.com/ to determine this.

Larger Category Icons

Before

After

Code

.es-catthumbs > a {
width: 397px;{
height: 297px;{
}{
.es-catthumbs > a > div > img {{
width: 397px;{
height: 297px;{
}{
.es-catthumbs > a > div:nth-child(2) {{
font-size: 26px;{
}{

Note: You may only use only either the smaller or larger category icons. Entering the CSS code for both will bring unexpected results.

Smaller Category Icons

Before

After

Code

.es-catthumbs > a {
width: 176px;{
height: 132px;{
}{
.es-catthumbs > a > div:nth-child(2) {{
font-size: 12px;{
}{

Note: You may only use only either the smaller or larger category icons. Entering the CSS code for both will bring unexpected results.

Remove Category Titles

Before

After

Code

.es-catthumbs > a > div:nth-child(2){
display: none;
}
Custom Background Image

Before

After

Code

Note: Before applying the CSS code below, you must first add the background .JPG file to the root image directory on your eStream server machine. Typically this is located at C:\inetpub\wwwroot\image. As you can see, I use the image folder as the place where I will save custom background .JPG files, and pointed the code at the correct folder location and file name. Obviously, yours may differ.

We also recommend using an image designed to “tile” across the page, i.e. something that could be repeated infinitely. If you look at the image above, you’ll see how eStream has applied a smaller picture in a tile pattern as the background, and each blend seamlessly into one another.

.inner-wrap {
background-image:url(c:\inetpub\wwwroot\image.jpg);
}
Custom Navigation Bar Background Image

Before

After

Code

Note: Before applying the CSS code below, you must first add the background .JPG file to the root image directory on your eStream server machine. Typically this is located at C:\inetpub\wwwroot\image. As you can see, I use the image folder as the place where I will save custom background .JPG files, and pointed the code at the correct folder location and file name. Obviously, yours may differ.

We also recommend using an image designed to “tile” across the page, i.e. something that could be repeated infinitely. If you look at the image above, you’ll see how eStream has applied a smaller picture in a tile pattern as the background, and each blend seamlessly into one another.

.topnav {
background-image:url(c:\inetpub\wwwroot\image.jpg);
}
Thinner Banner

Before

After

Code

Note: This will rescale the image; as such, we recommend using an image size of 1920x150 pixels for a thinner banner. You can of course change the “150px” in the code below to make a height to suit you. Changing the width is not recommended.

.es-page-header-graphic {
height: 150px;
}
Thicker Banner

Before

After

Code

Note: As you can see above, I have used an image with dimensions of 1920x450 pixels, rather than the standard 1920x300. In the first example, the larger image has been scaled down, but when the code below is implemented, the image will display correctly in full. If you were to use the code below but retain an image with a resolution lower than 1920x450, the image would start to repeat in a tile pattern. You can of course change the “450px” in the code below to make a height to suit you. Changing the width is not recommended.

.es-page-header-graphic {
height: 450px;
}
Modify Distance Between Widgets

Before

After

Code

Note: The 15px value can of course be changed to modify the distance to your liking; 15px would be roughly half the standard distance.

.es-page-row {
margin-bottom: 15px;
}


If you have any questions about custom CSS please contact Planet eStream support.