Another Yola Pro Question : where are the uploaded CSS files included relative to the core Yola CSS files?

  • 1
  • Question
  • Updated 9 years ago
  • Answered
Hi there, Yola team. Thanks a ton for your prompt answers thus far to all of my posts -- I am just getting my feet wet with Yola (eval'ing it for use with clients) and appreciate your time.

This may have already been addressed, but I have not seen it explicitly discussed anywhere. I have a question regarding the new capability in Yola Pro (I haven't upgraded to it yet) to upload CSS files; specifically, WHERE in the head are user-supplied CSS files included -- before after the core Yola CSS (i.e., the css that is generated from 'css-test.php?renderPalletteCss=)?

I am assuming that user-uploaded CSS files are included *after* the core CSS for the selected template in order to permit us to override certain styles? This, after all, is what CSS was designed for :) (Sidenote: I realize from related posts that you are reluctant to draw attention to the fact that styles can be overridden; while I agree that most of your users shouldn't be messing with CSS, at some point, you'll just have to trust that professional web developers like myself can tinker with things a bit without screwing anything up :-) ).

If not, I suppose I can just add a bunch of !important' declarations (or include a js file that sets/overrides the styles of certain desired page elements.)

For testing purposes -- using the html widget -- I've overridden the menu item image on the index page of my sandbox site just to play around :

--> replaced standard nav menu icon with an external CSS sprite on my server (and no, there is no good reason that I used a close-X icon ;)

--> added drop shadow to content area

--> rounded top corners of banner area

http://gastro.yolasite.com/css-test.php

Overall, I like the provided templates -- I just intend to add/remove/modify a few things here and there to accommodate a few specific design requirements :). Thanks!
Photo of herringtown

herringtown

  • 12 Posts
  • 2 Reply Likes
  • curious

Posted 9 years ago

  • 1
Photo of Christo

Christo

  • 95 Posts
  • 13 Reply Likes
Hi herrington

Your custom styles are not auto-loaded for you. You will need to add them with the html widget.

e.g.:


<link href="resources/your-custom-style.css" rel="stylesheet" type="text/css" media="screen" />


So, in summary:
1.) You manually add your files with the html editor (the advantage is that you can use the same stylesheet across a bunch of pages - edit the one file, and your changes reflect on all the pages)
2.) As such, yes, your files will be included after the default template files and as such will over-ride those. (in the same was that your inline styles have in the example above)

Hope that helps?
Photo of herringtown

herringtown

  • 12 Posts
  • 2 Reply Likes
Christo -- thanks! Thats the clarification I was looking for.

cheers.
Photo of Christo

Christo

  • 95 Posts
  • 13 Reply Likes
Glad I could help! :)