Custom CSS file in Site Designer -...

User 88287 Photo


Registered User
2 posts

Good evening. It seems as if all pages created use the MAIN.CSS file. Is there a method to have each page use its own .css file and NOT use main.css? The main or index page is fine to use main.css. Let's say I create another page called Personal.html. I want to create personal.css and have this page ONLY reference this personal.css file and NOT main.css. But, when exported, the file references main.css. All styles are automatically stored in main.css. Can you store the styles in a custom css file? Thanks in advance.
User 2699991 Photo


Registered User
4,383 posts
Online Now

Hello
There is a way but then you wouldn't be able to do any styling using site designer it would all have to be done as custom code, therefore you wouldn't see your page properly formatted until you views the page in a browser, so therefore negating the beauty of using code free app, you may as well use a HTML code editor

What's the problem with letting site designer do what it was designed to do which is take care of the code side of website design and development?

Now if it was that you want to do some additional styling to an element, that isn't do-able from within site designer, then you select the element move over to the 'ELEMENT' tag (top Right) open that and look for the section titled 'enter your header code for this element
select the 'edit' button and the code away to your hearts content enclosing it in the <style></style tags of course. But also note you will not be able to see the results until viewed on a browser
Mastering The Understanding With Hands-On Learning
NEW TO
"COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS

I can make "INDIVIDUAL BESPOKE" step-by-step video tutorials
for you to watch at your leisure as many times as you need

I have also started updating the ready made step by step tutorials, Ready Soon

my secure email details form
https://rsd-tutorialscom.coffeecup.com/ … l-details/
User 88287 Photo


Registered User
2 posts

Thanks for the reply. All good points. It's just that the main.css gets a little busy when you have multiple pages. It would be nice to have each page point to its own css file.
User 2699991 Photo


Registered User
4,383 posts
Online Now

CHARLES wrote:
Thanks for the reply. All good points. It's just that the main.css gets a little busy when you have multiple pages. It would be nice to have each page point to its own css file.


well to be honest I have been using site designer for years (before it was called site designer) over those years I have designed & developed over a thousand websites, a couple with like 140+ pages and in all those years never noticed any issues with the CSS .main getting over busy such that it had any real adverse effect of a page.
The only thing I would mention is the use of the "APPLY STYLES" = All Elements Of This Type, one should always try and get into the habit of using that as much as possible for elements where you know they are going to be the same on all pages.
So for instance a paragraph element (short,medium or long) which you want to be a different one to the default ('tahoma' for instance )you set the apply styles to = all elements of this type then starting from lowest breakpoint upwards you set things like font size / weight / padding /margin / width, letter spacing / word
spacing.
There is no class name given to it at this stage.
Any paragraph element you insert thereafter then is given the style that is applied to all elements of that type.

if then if you wish to apply a different style to one of them, (say for instance you want the text centering) then you would give it a class name = text-centered,, boom there it goes centered. if you wish to make it bold or semi bold etc, then another class name = "bold' and then set the weight accordingly. Should you then have other instances of a paragraph requiring text centering and bolder, then you just add the two corresponding class names. and so on and so forth.
It's true a lot of people cant be bothered to make that commitment but it does help enormously in keeping the CSS file down.

This can be applied to images particularly beneficial especially in a gallery type of element on a page
or applying the settings for a hero background element where the height/width etc are going to be the same on however many pages you need.

One other thing to mention is the use of the display = CSS grid especially for different pages and the elements therein, helps reduce the CSS too

But then basically, even if you don't follow something like that, and just fire away and style without a care, Site Designer & CSS main won't be the cause too many problems for you.
Mastering The Understanding With Hands-On Learning
NEW TO
"COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS

I can make "INDIVIDUAL BESPOKE" step-by-step video tutorials
for you to watch at your leisure as many times as you need

I have also started updating the ready made step by step tutorials, Ready Soon

my secure email details form
https://rsd-tutorialscom.coffeecup.com/ … l-details/

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.