Member Offer
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Styling this google calendar wp plugin

Discussion in 'Website Design Forum:' started by bamme, Apr 24, 2011.

  1. bamme

    bamme Senior Member

    Hi all

    im using the Stout Google Calendar plugin (WordPress › Stout Google Calendar WordPress Plugins) here: Winning Health Solutions - Strength and Conditioning Gym in Southampton

    It seems to insert an iframe and pull directly in, google's calendar stylesheet(s).

    I want to tweak some of these styles, and i was wondering what file i might go into and change to do this, or how i go about overriding styles applied to existing id's/classes, eg thru javascript or something? the jquery framework is used on this site so that would be preferable

    thanks in advance :)
  2. Kevin

    Kevin Senior Member

    The plugin page says the colors are customizable. Probably in your admin section.

    If you want to manually override css it will just take some puzzling to find out which classes are re-used. Make good use of cascading to address the child elements of these fixed classes.

    .st-dtitle span { ... } for example, will allow you to change the color of your text.

    But in all honesty, why go through all that hassle if the customizing is built in (nod)
  3. bamme

    bamme Senior Member

    Thanks Kevin

    Well, yea, its customisable in the sense that the width and colour are customisable.

    However i try to pick out id's and classes and put them in my main stylesheet ( I want to change font size, and actual font, and maybe give the thing some sort of gradient for each day cell) they aren't 'picked up' so to speak cause i think google's one comes after mine.
  4. bamme

    bamme Senior Member

    you can also change text colour as part of the plugin. just want to make it look a bit smoother and blend in with the design better.
  5. Kevin

    Kevin Senior Member

    Well for one, overriding .calendar-container will allow you to change fonts.
  6. glenwheeler

    glenwheeler Senior Member

    Hi Emma,

    Use firebug to inspect the element. Then copy the class into your own stylesheet and apply !important to the style that should override them

    Sent from my iPhone using Tapatalk
  7. bamme

    bamme Senior Member

    Hey guys, sorry i didnt reply this sooner!! My email notifications seem to have stopped working again. Thanks for this - i did try these things, but it looks like Google's stylesheet overrides my attempts to, well, override it. Maybe ill go into the plugin and try to give something an id or something.

Share This Page