Override site css with custom css file

I just started using mobirise yesterday and I was struggling with not being able to resize the logo on my site. I was eventually able to accomplish this by creating a custom.css file with the css change I needed to make:

.navbar-dropdown .navbar-logo img {
height: 6.125rem;
}

I saved this custom.css file in the \assets\theme folder

I was then able to load the custom.css by using the HeadBody extension. I couldn't load this at the bottom of the Head section for some reason but was able to add it to the top of the body section using:

<link rel="stylesheet" href="assets/theme/css/custom.css">

I imagine this will work for any css override you need as the custom.css file is not broken when you make changes and republish.

Comments

Hi @mjpaterson ,Cool approach - adding an extra stylesheet and just linking it in your page! Simple, clear and believe it or not striking me with the question "Why haven't thought of it before? So easy and simple!?" Thanks for sharing

Since you are saying you've just started to work with the builder I'll thake the liberty of sharing some tips which hopefully will be of some use to you

The simplest way adding something to the <head> section without utilizing unsure third party extensions is placing the snippet you need in the Google Analytics field which is found in the Page Settings dialog box. It does exactly that - places its contents before the closing tag of the head.

Also I think these three articles will save you some time debugging previewed builds trying to figure out which class is doing what - in the second one there are some styling snippets about the navbar in particular - just make sure you've added the curly brackets - for some reasin they got lost in the way

Here is the link - don't get confused by the domain name - these two - the Builder and the Sllider are actually brothers

There is also a good knowledge base in the Mobirise Builder's help section. I just checked it out to copy the address and it looks like the articles are not ordered chronologically ( there is probably some maintenence currntly going on) so if you have some time try taking a glance at all the pages

I do recall when I was starting with the Builder a few months ago - the excitement about the cool features went along with the questions about making making something a bit different from what's been already made for me. Basically I had to find my path alone - it would have been great if I had somebody to ask at the time but this forum got to existance a bit later.

Hi everybody!While looking for an answer to my problem I got to this post, but after reading and trying everything I still can't solve it...I want to set a pattern overlay over a background video.Not a solid color, but a custom pattern (a 4x4px. png file).This is what I've tried so far:

Hi @diegolanda1983sorry to probably dissapoint you buddy but the only way to implement this is pre uploading the image assets you consider including in your CSS scripts to their permanent location on the server and just then - including them in the Custom CSS declarations with their full address - meaning with the http://www and everything.

Why is this so? Itried figuring this out recently since I was making a concept for an probable client - you can take a look at the live site if curious

as you can see there are a lot of images put there - the logo is actually a background along with the red background and the pot is included with :before or :after - I can't recall which one - and absolute positioning

It turned out unlike Custom HTML which includes files referenced with file:/// approach the CSS remains generated as is and so far - since I'm sure the Mobirise team will take care of this very soon - the full path to the permanent location is the only one to take.Regarding the assets folder you're talking about - yes there is such folder but it's not the one you're probably thinking of - its neither the one in your publish or in the temporeary preview folders - these are only products - only the generated pages use them.

So where is the actual assets folder - I suppose at the same place the default themes files reside and if you figure this riddle out - please let me know. Personally I've tried several times - I even installed a tool tracking all application's activity on HDD but got lost in the hundreds of requests.

So when I started writing this I was actually going to advise you just uplad the files and reference them but then as it sometimes happens I got a few ideas:

The first one was to duplicate the project file for the above web site and manually edit the absolue paths replacing everything before the assets folder with @PROJECT PATH@ inspired by the 10 steps to get your images back post here in the forum. To do that I also manually copied the needed files in the assets/images folder before opening the project

So I did and it worked - the images got correctly displayed in the project but again referened the file:/// way - meaning not gon included in the assets folder on the next publish.

So I was about to give up when I thought of this - how about including the needed images in extra page which to remain away from the actual web site structure not being included in any navigation or links. An initail thought - in order this to works smoother the Resize images option should be turned off upon puloading the images to avoid them being renamed like this:

Do note that even after turning the image resize option off the Builder might alter the file name - in my example it added the "-1" suffix but I'm not sure if it did because I was uploading this image several time - with and without the resizement option - so maybe the best way is making a test publish and looking in the images dir to see what actually happened.

And the last step - referencing the images in your CSS - here is a little something to take note too - the root dir. It's considered not the DOCUMENT ROOT folder - the one containing the index.html file and so but the dir where the CSS file resides. And since all the custom styling is stored in the mbr-additional.css file the root dir comes to be ThePublishDir/ assets/ mobirise/ css/ .

So in order ot make it go up to the site's root and then down to assets/ images/ again we need to add../../../ before assets so the correct url becomes

url("../../../assets/images/some-image.png")

added thins aaand - it displayed nothing in Builder

BUT! it displayed perfectly fine in browser

This is because a Mobirise Builder project is actually two identical projects sharing same assets defined different way - the ine getting generated, viewed, uploaded and so on (the html pages) and the one being read by the Builder which resides in the project.mobirise file. Sometimes these two slightly differ - as in this case for example

So personally I'm going to continue working with referencing the backgrounds the both way in order to have them universally visible and will probably clean up the file:/// references just before the handovers 0 haven't decided yet but most probably with the Notepad# after the publish to keep the project's editing features - as we all know quite well when it comes to clients - there is no such thing as FINAL version

So basically that's it! I'm actualy quite glad since starting this post my intentions were to just advise you to upload your images to server - everythig elese came along the way