Shoehorn: Customization

Shoehorn: Customization

by KirK Chapman -
Number of replies: 9

Hello Gareth,

Thanks for the fast Shoehorn updates.

Moodle 2.7.2+ I'm working with an imposed color scheme.

As you can see from my screen shot (Grid format: Carousel -awesome feature cool), I've styled the region-main-shoehorn with fff6d1 and also used

a {
    color: #fff;
}

which causes the text in region-main to blend in with the background.  As the breadcrumbs, blocks li components and some region-main-shoehorn text elements are linked with the above, I'm looking for a way to style the region-main-shoehorn text element separately.

Suggestions?

Thanks,

Peace




Attachment topic_carousel.png
Average of ratings: -
In reply to KirK Chapman

Re: Shoehorn: Customization

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers 
#region-main-shoehorn a {
    color: #F85E00;
}

But please do use Firebug (or other browser development tools) as Mary suggests because time is not my friend smile

Average of ratings: Useful (1)
In reply to Gareth J Barnard

Re: Shoehorn: Customization

by KirK Chapman -
Ahhh man black eye. I should have known this as I have Firebugged this theme to death!
Working on fumes and didn't see the trees for the forest!

Thanks Mary and Gareth,

Peace
Average of ratings: -
In reply to KirK Chapman

Re: TIP for today | Shoehorn: Customization

by Mary Evans -

TIP for today!

You should not target the 'a' (anchor) tag only, as this can lead to unwanted styling. What you should also style are a:link, a:visited, a:hover, a:active, a:focus too as these can enhance the way users recognise a hyper-link on a page.

Also the order these are written in is important too!

http://css-tricks.com/snippets/css/link-pseudo-classes-in-order/

Average of ratings: -
In reply to Mary Evans

Re: TIP for today | Shoehorn: Customization

by KirK Chapman -

Hello Mary,

Really appreciate the tip, the reference site is a valuable tool with clear explanations.

However, it seems that I incorrectly explained my issue. I asked how to "style the region-main-shoehorn text." I was mistaken describing the wrong element. What I intended to ask is how to color the a:link when it appears inside of region-main-shoehorn vs. the a:link  that appears outside the region-main-shoehorn. From the screen shot you see that I show 3 a:link instances: bread crumbs , block and and label name.  If I Firebug 1 instance they all change. I assume cause' they're all linked to that a { color: # fff;}.

So I'm looking for a way to have the a:links that appear in the region-main shoehorn ( "Add an activity or resource," activity and label names. etc) a darker color (against the region-main BG) while leaving the breadcrumbs and block list items links white. I can't seem to find separate elements for them in Firebug.

Thanks,

Attachment topic_carousel.png
Average of ratings: -
In reply to KirK Chapman

Re: TIP for today | Shoehorn: Customization

by Mary Evans -

There are css selector class associated with the section within a course page, best thing to do is check out  these styles which are in base theme which I find easier to locate...should give you a clue.

https://github.com/lazydaisy/moodle/blob/master/theme/base/style/course.css#L18

so you would need to add something like...

.course-content .section .activity a:link { color: #890;}
Average of ratings: -
In reply to Mary Evans

Re: TIP for today | Shoehorn: Customization

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

But Shoehorn only uses the base theme in respect to the layout configuration of layouts that have not been specified.  It certainly does not use any base CSS.  Only the CSS from course.less in the Bootstrap theme (not Bootstrapbase) which would have been derived in the first instance from the Base theme but could have diverged since then.  Other core styles that are imported are the styles.css in the core and contributed plugins.

So, I don't have an answer at the moment as have been very busy with Essential and a core tracker issue.  However, the styles to look at are contained here: https://github.com/bmbrands/theme_bootstrap/tree/master/less/moodle

Average of ratings: -
In reply to Gareth J Barnard

Re: TIP for today | Shoehorn: Customization

by KirK Chapman -

Thanks Mary and Gareth for looking into this.

No problem. I'm finding that white text is problematic throughout. Too many places (i.e  SCORM reports where it's just too tedious to style for every instance of  backgrounds vs light text. While I'd like to know how to do it- It's just not important enough- now. I'll look into other color alternatives.

Thanks againsmile

Peace

Average of ratings: -
In reply to KirK Chapman

Re: TIP for today | Shoehorn: Customization

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Hi Kirk,

To be honest I have been concentrating on developing Shoehorn and getting the colour scheme though manipulation of the variables-shoehorn.less and then using the Gruntfile.js to make the CSS.  If you wanted to, there is full instructions on using 'Grunt' to make the CSS from the LESS in the file.

But another thought would be to turn things on their head and style them another way.  Instead of globally setting the link colour as you want to target the breadcrumb and the blocks is to target them separately.  They have the classes 'breadcrumb' and 'block' respectively.

Cheers,

Gareth

Average of ratings: Useful (1)