Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
How to customize bootstrap theme non-destructively?
#1
hi

i'm using theme "Spectral", which is based on bootstrap. 

i want to override some css with my own css, 
but i do not want to alter the theme files. 

i tried some simple css changes to the themes css, and did not get same results as when applying same changes to my browser's developer pane. i'm guessing this has something to do with bootstrap's responsive css. 

is there a recommended way to do this?
i've read a bit about kickstrap-- is that a good solution?
how to install on GS?

the bootstrap "customize" page says simply:
Quote:The web customizer is no longer available for outdated versions of Bootstrap.
which does not make sense, since that page is linked on bootstrap's homepage. 
http://getbootstrap.com/2.3.2/customize.html

thx
Reply
#2
That theme is pretty much unchanged from the free template here:
https://html5up.net/
It is not bootstrap. they have their own grid which they call skel. there are some docs here:
https://github.com/ajlkn/skel.old/tree/master/docs
I haven't been inclined to mess with it but It's 12 column grid and the cols are called units so where you see <div class="6u"> that's a 6/12wide column. Different break points you can change as well.

The mains css is a bit daunting at 3800 lines but make a new heading at the bottom of it 
/*johnywhy's edits*/
keep copying and saving with a new filename and you can always go back.

If you don't want to actually alter the css as provided it should be enough just to copy and paste to the bottom the declarations you want to change and as long as they are after the originals they will take precedence. It won't make for a small file but that file is totally bloated anyway so it won't make much difference.
Reply
#3
(2016-10-27, 08:38:36)Timbow Wrote: It is not bootstrap.

The mains css is a bit daunting at 3800 lines but make a new heading at the bottom of it 
/*johnywhy's edits*/
keep copying and saving with a new filename and you can always go back.

If you don't want to actually alter the css as provided it should be enough just to copy and paste to the bottom the declarations you want to change and as long as they are after the originals they will take precedence. It won't make for a small file but that file is totally bloated anyway so it won't make much difference.

Timbow, thx for details! You're right, it's not bootstrap. 
http://get-simple.info/extend/theme/spectral/1059/

I'd rather not put any custom CSS into the theme's stylesheet, not even at the bottom. Want my css to be a separate file. I assume i can put an @import statement at the bottom (or top) of their css, to include my file. 

re the bloat, yeah that sucks, but my site loads super-quick, so it's apparently not an issue.

However, i noticed that when i apply css to the theme in my browser dev pane, it works fine. But the same css manual added to the theme's stylesheet does not work, or works differently. Not sure how to do proceed. 

thx!
Reply
#4
I couldn't say why your edits aren't working as expected but css can get confusing.

You could always make a new css file and link to it in the head section after the others. The result would be the same as adding lines on the bottom. I would be wary of using !important much.
Reply
#5
Is there a minimized version in use
NEW: SA Admin Toolbar Plugin | View All My Plugins
- Shawn A aka Tablatronix
Reply




Users browsing this thread: 1 Guest(s)