How to add a banner image across all pages, and variables for custom.css?

Support Themes & Styling
1

Hello,

I am wondering how to add a banner image across all pages? I know that I have to edit all templates, but I am really lost here, I have no experience web developing.
Ideally, I would like to have the banner be a random image from a banner image folder.

Browsing the forum I found this, but its not working:

{% extends 'partials/base.html.twig' %}

{% block content %}
		<div class="flush-top" style="background-image: url({{url('theme://images/header.jpg')}});">
		</div>
        
    <div class="content-wrapper">
        <p>
            {{ page.content }}
        </p>
    </div>

{% endblock %}

Also, im wondering where to find all possible variables to edit at custom.css ?
It seems to be the easier way for me to edit my theme but I m not sure what are all the possible variables.

Thanks

2

Hello Yami,

to create a theme or even to change a theme u have to deal with a lot different languages. html, css, probably sass or less, js, twig and php. there are lots of webpages where u can learn these things i mentioned before.

i think that is what ur looking for:
http://gantry.org

its a highly cutomizable theme and u are able to adjust the layout in the backend.

c u

3

hello, npetri.

Gantry looks really cool and will definitely help me make my site, thanks!
I am also going to look around and start learning some of these languages, I know some bash and python and thats about it for me.

1 Like
4

hello yami,

yea, then u r familiar with the basics like data - and control structures.

https://channel9.msdn.com/Series/HTML5-CSS3-Fundamentals-Development-for-Absolute-Beginners



http://learn.shayhowe.com/

and all usal homepages for twig, php, sass…

useful site to checkout sass statements
https://www.sassmeister.com/

useful for testing code snippets
https://www.sassmeister.com/

ok, c u

1 Like