Editing elemental theme

I am making a website with concrete 5.7. and to edit somethings i have copied the Elemental theme and created my theme. But there are two things i don't know how to edit:
1)i love the way it changes the autonav navigation to a mobile one when the screen size is small, but is there a way to define how the elements are going to be disposed when that happens or at least at which size it must happens? The logo becomes really small and all the elements appear disordered.(attached file shows those problems)
2) When i change the colors of my website,(settings->design->customize) where does this changes store, because for me it would be easier to use a text editor rather than doing it with the tool. I don't want to create a new color preset, only to know where these changes are stored.
Thanks for everything.

2 Attachments

View Replies: View Best Answer
MrKDilkington replied on at Permalink Reply
Hi alsastre,

Do you have a link to the website?

Regarding the Custom CSS through the Customize menu, I imagine that is stored in the database.

CSS can be directly added to the theme style sheet. The theme style sheet for Elemental is called main.less. Less files will accept regular CSS code.
alsastre replied on at Permalink Reply
Thx I will do that regarding to the css
You can view the website at saridopi.mooo.com/Concrete5
If you an easy way to rearrange elements in mobile version let me know.
Pd: it's on my raspberry pi so be patient loading the page.
MrKDilkington replied on at Permalink Best Answer Reply
Did you create new page template areas?

There are a lot of in-line styles and unusual modifications.

I recommend reading through this. It will explain how the grid system for the Elemental theme works.
alsastre replied on at Permalink Reply
Thank you very much! I will try to use them, right now as you have said i was using inline styles to override styles that i wanted to change. I will try them, with that tutorial i think i can fix my mobile version and a few things more.

But there are things that i have overridden with inline styles that i don't know other way to fix them. Things like global margins, padding between elements (for example the padding bottom of the header area).
And others that even with in-line style i haven't been able to modified as the padding between elements in the auto-nav.

Could you point me out which are the main files that i should modified to get this things modified?
I haven't created any new page template, i have only been modifying a copy of the elemental theme.
Also, bootstrap-modified.css what it is? it is the css that my webpage is going to read, the file generated from the .less? It is the only .css i have found on my theme.
MrKDilkington replied on at Permalink Reply
To save yourself a lot of headaches, I would read up on using Bootstrap and start again from scratch.

Bootstrap will handle the horizontal padding and margins for you. You can use custom layouts to create rows. Vertical spacing can be added with block and area designs.

The file main.less is your main style sheet for the site.

The bootstrap-modified.css file contains the CSS for the grid system.