Change Your Preset Highlighting Patterns

On Webgarden there are 4 preset patterns you can use to highlight important elements on your website. If you would like to change any of the patterns, you can do that by editing the CSS code.
Take a Look at the Existing Patterns
The patterns automatically available with each design template have been chosen to match up well with the specific design’s graphics. Make any changes carefully and wisely so your website will maintain a well-designed look.
It’s a good idea to first try out any changes on a test website. Your test website won’t be accessible to normal visitors, and therefore will not undermine your main website.
On your test website, change the design template to match that of your main website. Then in category A create four paragraph text elements side by side. Each one should contain some text.
01 Enter 4x paragraph text with marks.png
It will look like this on the actual website.
02 4x text actual website with marks.png
Highlight each of the paragraph text elements using a different preset pattern. This will allow you to see how all the patterns look before making any changes.
03 How to highlight with marks.png
The highlighting patterns will look something like this in administration, which is definitely not how it will look on the actual website.
04 Highlighted text in admin with marks.png
Be sure to look at the actual website once you’ve done this to see how the patterns will really appear.
05 Highlighted text on actual website with marks.png
Edit the CSS
Once you’ve seen all the preset patterns you can decide which one you would like to change. For this example, we’ll change Pattern 1.
Go to the Design tab and select CSS Editing from the left column. In the CSS the individual patterns are listed under /* GROUPS */ as .highlight01 - .highlight04. In this particular design template there is a lot of code for highlighting, but your focus will be on the code at the top.
06 Find highlighting in CSS with marks.png
In the CSS we can see that .highlight01 has a predefined border with a specific width, style, and color. The color has been indicated using the RGB scheme. The individual values specify the ratio of Red, Green, and Blue. The numbers 0 - 255 represent the intensity of the color. So 0 means that none of that color is present, while 255 means that it is at its fullest intensity. Therefore rgb(0,0,0) is black and rgb(255,255,255) is white. In this case the border color is rgb(221,221,221), which consists of three identical values other than 0 or 255, meaning it is a shade of gray. If you want to change the border color to blue and make it twice as thick, just change the border value to 2px solid rgb(20,20,130).
07 Edit the CSS with marks.png
On your website it will look like this.
08 Edits on actual website with marks.png
Now you’ve created a pattern with good contrast that goes well with the white website background. At the same time you’ve maintained a suitable color scheme so that everything fits in well together.
Using patterns you can also modify many other attributes, including background color, font color, font size, padding, margins, etc.
For Advanced Users
Although Webgarden only offers four preset patterns, through branching you can create many more. For example, you can define Pattern 1 four times (for the header, side columns, content, and footer) by using the selectors .top .highlight01, .panels .highlight01, .display .highlight01, and .bottom .highlight01.
05/18/2015 08:14:17
Or visit this link or this one