Go to Main | Display Options | Style | Options
This section is rather large, so I will probably end up breaking it up into multiple pages…
This first option you will come to is CSS or Live Preview Layout Form. In the original version of this plugin, I have two textareas where you can write your own CSS styles for each part of the widget and Event Calendar page.
The good side to this is that you can control every minute aspect of the layout, and you can cut out the CSS and add it to your theme CSS for editing that way.
The bad… Well, I have had a few complaints because not everyone is a CSS master and it can be a pain in the butt making changes, then saving, then going to look at the page.
So, while the CSS option is still available, I’ve added a Live Preview Layout Form to assist in styling the plugin.
But first, CSS option…
Again, you can cut out these portions and insert them into your theme CSS. Just make sure you save the form with the fields empty.
Calendar Styles: This is the CSS that controls the look of the Full Calendar and the Widget Calendar, and the Widget List. You can tweak the look of each using these style sheets.
Events Page Styles: This is the CSS that controls the look of the Event List page and the Categories List.
That’s it, short and sweet.
Now… Layout Form Option…
I think there are a few cool things about this option. First, after you save the CSS using this form. You can generate a CSS stylesheet by clicking the link next to the option. Then you can use that to further tweak the look beyond the features that I’ve provided in the form. Just make sure that if you want to do it this way, after you’ve generated the CSS you switch back to the CSS option and save the form with the CSS fields empty.
The second thing I think is cool is that each section (Calendar Widget, Event List Widget, Full Calendar, Event List Page) has a link to show/hide a live preview. As you make changes in the form, these previews will be updated to show you how they “should” look on your site after you’ve saved the changes. I say “should” because I am still working on this and don’t know if it is 100% yet, I pushed out 1.7.1b because there were a couple bug fixes that people were waiting for. I still plan on adding a color picker for the color fields.
Now, instead of going over every single field for every portion, I will first give an explanation of the options that are available.
Width: Enter the widths in px format, for example 20px. If you just enter 20, it will not work right.
Height: Enter the heights in px format, for example 20px. If you just enter 20, it will not work right.
BG Image or Background Image: Enter a complete url including the http:// that points to where in the Internet world the image is that you’d like to use as your background for that option. (I suggest hosting the images on your own site)
BG Color or Background Color: The background color of the in format #FFFFFF of the option you are using it for.
Border: 1px – 5px: This is the border around the option you are updating it for. (Note: if you already have a border style and border color set, and you choose a different border size, the Live Preview will look like the border has disappeared until you reset the style and color)
Border Style:
- none: No border
- hidden: I think this applies a border, but hides it. I’m not sure but it was listed as an available style on the W3C site
- dotted: A border of dots
- dashed: A border of dashes
- solid: A solid border
- double: A double line
- groove: Not sure how to explain this one, try it out and look
- ridge: Not sure how to explain this one, try it out and look
- inset: Will make what the border is surrounding look like it is sunken into the page
- outset: Will make what the border is surrounding look as if it is raised off the page
Border Color: The color of the border for the option you are applying it to.
Weight: Whether the text in the option you are applying it to shows normal or bold.
* Color: The color of the text within these options.
Line Height: The line height effects how much vertical space a line of text takes, if you are having issues vertically centering the text in one of the options, try changing the line height.
Left-Margin and Right-Margin: Will add space to the left and right hand side of whatever options have this attribute.
Float: Float, will float an option to the left, none, or right.
Text Align: Will align the contents of the option either to the left, center or right side of its containing borders.
Font Size: Size of the font within the option, use format 12px. 12 by itself will not work right.
Did I miss anything? If there are more attributes anyone would like added to the forms, let me know.
Go to Main | Display Options | Style | Options
