Remove .css file from "Dependent File Toolbar"; then edit and rename

Report · Apr 30, 2018

This is semi-complex but I have to edit and rename the .css file because I'm working with a bootstrap template and want to change the photo of multiple different pages of which are linking together. And if they all have the same .css file within -> each will automatically have the same photo (.jpg) .

So I don't know if this is possible but let me go more in depth of the situation. I am using this nice pre-made bootstrap template. But now I want to "multiply" it i.e. more pages - along with links from the home page - and want to have different headings, photos, etc. However, nothing really can get done until I can figure out how to change the main photo that is set on the template. It is located in the .css file which I can locate along the Dependent File Toolbar (top, right of the source code where all the .js's and .css's are...along with other scripts). Now I learned recently on how to add source codes if needed, but never on how to completely REMOVE an existing source code -> because that's what I kinda of need to do FIRST here I think.

So, in general, here's a summery of what I would need to do to be able to make more pages with different photos

1.) Copy (obviously) and then REMOVE the existing .css file

2.) Create/open another .css file for new page and title the .css differently

3.) paste the old .css file (again, this has different title)

4) NOW I can change the photo and it won't change in ALL templates; because the .css is now independent

5.) Save the new .css with where the original was located

So does this sound like a plan? Please fill me in.

Report · Apr 30, 2018

Rule #1 never change the original CSS file. Doing so will only confuse things later on.

If you want to change the style rules, create an overriding style sheet called mystyles.css or similar.

As an example, the original style sheet has imageA.png as a background image for <div class="banner"> and you want to change that for your homepage to imageB.png.

1. Give the page a class as in <body class="homepage">

2. Add the following rule to mystyles.css

.homepage .banner {

background-image: url("imageB.png");

background-color: #cccccc;

}

Wappler, the only real Dreamweaver alternative.

Report · May 01, 2018

Hi BenPleysier. I think that sums-up exactly what I have done so far. I copied the exact same original CSS file and just want to change the name/title of the image file; and save that as mystyles.css That's about it. Now all I have to do is REMOVE the original CSS along the top of the Dependent File Toolbar and insert the new CSS (see pic below). How do I do that??? When I right-click it only gives me "open as separate file" option.

Once I get the newly titled but same CSS - but with different image - all should be fine and dandy. I just need to know how to switch the two CSS files now.

Report · May 01, 2018

In Code view, change the link to the correct file as in

<link rel="stylesheet" href="[pathto]/style.css">

to

<link rel="stylesheet" href="[pathto]/mystyles.css">

Wappler, the only real Dreamweaver alternative.

Report · May 01, 2018

That does the trick . I was thinking having to remove and "re-pasting" the CSS box I made but I guess it is just easier that way.

For any page which I want different pictures for I assume I have to do a new CSS and just stick it in the CSS folder then.

Thanks for your help

Report · May 01, 2018

johns45317965 wrote
For any page which I want different pictures for I assume I have to do a new CSS and just stick it in the CSS folder then.

No, you did not understand what I had written previously.

You do not have to copy and paste the style sheets for any page, you should have style sheets that apply to the whole site. There are exceptions, but naming them will only muddy the water.

If you are using Bootstrap, you should have a link to the Bootstrap style sheet followed by a link to your own style sheet.. Then, if you want to apply different rules, using the same selectors, change the rules.

If you want to apply different rules per page, give the page a class, as mentioned previously, and use that in your selector as shown for the homepage in my previous post.

What you finish up with is

<link rel="stylesheet" href="css/bootsrap.css">
<link rel="stylesheet" href="css/mystyles.css">

These style sheets are the same for each of your pages, no copying and pasting necessary.

As a side note, I am not saying that what you are doing is wrong, it adversely affects your workflow.

Wappler, the only real Dreamweaver alternative.

Adobe Community

Remove .css file from "Dependent File Toolbar"; then edit and rename

1 Correct answer