User Tools

Site Tools


custom_css

Custom CSS

Enabling custom CSS is one of the most basic and common tasks for which PHPlugins can be used, and will often be a prerequisite for implementing other customizations. Because custom CSS is so fundamental, we've already set everything up for you; you need only turn it on.

In the phplugins.php file for every CE3 plugin, you will find this example function:

/* DELETE THIS LINE
// CUSTOM STYLESHEET
// This function implements a custom stylesheet from which users may provide additional page styling or override existing styling set by the plugin
// Edit the custom.css file in /phplugins/css/ to define styles
// Serves as an example of a function being applied globally
function ttg_head_end( $style, $path ) { 
	echo '
	<link rel="stylesheet" href="/phplugins/css/custom.css" />
	';
} // END
DELETE THIS LINE */

Enable this function to implement the custom.css file in your website. To enable the function, remove the lines:

/* DELETE THIS LINE

and:

DELETE THIS LINE */

You may then add any custom CSS to the stylesheet found at /phplugins/css/custom.css.

To verify that your custom.css file is properly working, add this to the file:

body { background-color: red; }

Visit your website. If the page background is red, then you know it's working.

Guidelines for Customizing CSS

Here are some handy pointers to keep in mind when you're modifying galleries and pages with custom CSS. Knowing this stuff should help you to better implement your changes within the CE3 framework, keeping civilian casualties to a minimum.

1. Duplicate existing CSS
Wherever possible, duplicate the existing CSS instructions in your custom.css file, modifying values as necessary. You may get at the existing CSS using web-browser developer tools to locate the instructions in question, then open the relevant CSS file to copy code.

2. Use specificity to effect overrides
More specific CSS will take priority over less specific CSS. Therefore, where straight duplication of instructions fails, you can usually force your changes by making your instructions more specific. You can usually do this by fronting your instructions with a parent selector. For example:

html div#the-block { ... }

… is more specific than …

div#the-block { ... }

… is more specific than …

#the-block { ... }

3. Only use !important when absolutely necessary
You can force properties to remain in effect – effectively breaking the cascade – by marking them as !important. For example:

#the-block { background-color: red !important; }
#the-block { background-color: yellow; }

… would result in a red colored block, because red is marked !important, and so the yellow instruction is ignored. This can be very useful, but it can also break your design when latter instructions depend on the cascade to do their job, as is often the case. Therefore, use !important sparingly and only when absolutely necessary.

When all else fails, also remember that you can cascade !important:

#the-block { background-color: red !important; }
#the-block { background-color: yellow !important; }

… would give you yellow. It's crappy to code this way, though, so only do it if you have no other options.

4. Use media queries to unbreak your customizations on mobile
After making customizations to your desktop layout, you may find that your modifications have an undesirable impact on your mobile layout. In such cases, use media queries and the cascade to “reset” your changes for mobile:

.sf-menu ul,
.sf-menu ul li {
	width: 200px;
	}

@media only screen and (max-width: 1024px) {
/* reset appearance for small displays */

	.sf-menu ul,
	.sf-menu ul li {
		width: auto;
		}

	} /* max-width: 991px/1024px */
custom_css.txt · Last modified: 2013/03/18 07:39 by admin