Tag Archives: css

Adding custom css to a wordpress website for plugin html

Updated on by

Do you want to add css for html generated by a plugin perhaps?

Got a Custom Theme?

Do you have a custom theme that you are NEVER going to automatically update?

Then edit the themes css, add your custom css to the bottom of the main style.css.  This should be in your themes folder under wp-content.

Got an Updateable Theme ?

Does your theme have upates occasionally ? If you want to be able to auto update your theme, then it is better to add your css separately.

Some plugin have ways to add a custom css file for that plugin and/or to disable any plugin css so that you may reduce the number of stylesheets.  Do NOT edit any plugin css files unless it is a site specific plugin that will not be updated automatically – you will lose your css when the update is applied.

The easiest way to add custom css if you cannot use your themes style.css is probably by using the official wordpress jetpack plugin: http://wordpress.org/support/plugin/jetpack
It has a custom css module http://jetpack.me/support/custom-css/   There are other plugins that allow you to do this.

How to work out what css selectors to use?

First you need to work out what css selectors have been provided in the html that is generated.  My plugins generally offer many css selectors in the html.  The various ‘inspect element’ tools are invaluable here.

Examples:

They help highlight what css is being applied to the html and what is being overwritten.   And of course they help you to see easily what css ‘hooks’ there are to add special styling.

Your custom css needs to work with your theme, so you either need to specify the css tightly enough that no theme css will ever override it, or know that you are not going to be changing themes.

To work out what css to add, ideally you should have a reasonable understanding of css.  In particular the concepts of specificity and inheritance
http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/ .

You could ask for help from css experts.

When asking for help you should

  • provide a link to the problem page of your site or demo site
  • identify the theme you are using perhaps
  • be clear and specific about the effect you are trying to achieve and your level of skill in editing css

Browser consistency

You should also know that browsers vary in their implementation and while your hack that you worked out or have been given might look beautiful on your apple mac running safari, results can vary greatly.

If you have any pride in your work at all, you should test the result using something like http://browsershots.org/, or risk the site looking really stupid.

Identifying CSS selectors example:

In this example from the amr-users plugin, one can see that:

  • there are id’s specific to a user list, thus enabling one to isolate your css to just the list  (div id=userlist1)
  • there is a general userlist class which enables one to style all such userlists with the same css
  • there are classes per field allowing one to style individual fields
Using Inspect Element to inspect the html and css

Using Inspect Element to inspect the html and css

Disappearing images or avatars in tables in chrome?

Updated on by

A ‘funny’ recently presented itself.   In the chrome browser, avatars were not showing up, despite they being there in the html code.

My first thought when I hear of browsers responding differently is to check html validation – browsers often cope with errors but sometimes not.

In this case, it was the css that turned out to be the problem.

An invaluable tool to debug these things is the ‘inspect element’ firebugs or chromes and the ability to deselect or add css to see what is overriding what.  See http://bigemployee.com/4-simple-techniques-to-quickly-debug-and-fix-your-css-code-in-almost-any-browser/

Fairly quickly one could see that somehow the inline attributes were being overwritten.

Image attributes overwritten

Image attributes overwritten

Scrolling back up through the css to see what might be overwriting that css, I paused thoughtfully at a image max-width and unticked and  reticked some css.

As soon as I unticked the max-width the images reappeared in chrome.

Undo Max Width

Undo Max Width

 

A quick web search showed that others had encountered this before and had some suggestions on overcoming this.  It seems Chrome interprets the rule differently from Firefox. It assumes the image can freely be shrunk, and with a long string of text in the cell next door, it squeezes the images.

So some possible solutions appear to be:

  • remove the max-width attempt to be responsive, or
  • set a fixed table width
  • maybe set a fixed column width

 

amr users css, html and styling

Updated on by

How to change the look of your user list:

(see screenshots further down)

CSS:

  • Plugin comes with a default css file used mainly for the public lists
  • Default css tries to let your theme do most of the styling for consistent appearance and just add essential extras
  • Default css can be switched off completely
  • There are many css classes and selectors so that you can target almost any part of the list to achieve your own styling.  Please use your browser’s ‘inspect element’ to investigate the classes for your data and lists.
  • Default css can be activated for certain pages only
  • If you need custom css – maybe because you’ve created a very wide list or your data has forced the table to be wide, see adding custom css to a wordpress website

HTML:

  • In version 3.4 onwards, the admin or backend lists all use table html as these lists are also used to administer the users
  • Tables can be good and tables can be tricky.  Since YOU are determining the columns, the field values in them and the size of the table, the plugin should not attempt to impose any fixed sizing.   This means if you have a wide list, you may need to add some css to make it behave the way you want.
  • For ‘public’ lists, a ‘public html type‘ can be set to use simple html which allows more flexible styling of the lists.  The same “classes” will be used so much css can be shared for consistency of appearance.
  • so public html type can be:
    • table – yes a normal html table
    • simple – a html5 non table format

Images:

  • csv export image link and refresh link icons or text can be totally customised (general settings)
  • default avatar type (used if user does not have their own avatar) will be set by your wordpress settings (settings > Discussion > scroll down to set default avatar )
  • avatar size can be set as a default for all lists (general settings) and/or customised per list (configure list or overview)

CSS and image settings screen:

Css settings for ALL lists – in the General settings

 

Setting the public html type:

Set the public html type for a list in the overview settings

Css Selectors available

  • Each user record or row has a vcard class, and an even or odd class
  • Each field for that user has it’s fieldname as a class
Css selectors available for a demo page at https://bp.wpusersplugin.com/user-list-files-urls/
Css selectors available in the non-table html