Skip to main content
johns45317965
johns45317965
Known Participant
May 1, 2018
Answered

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

  • May 1, 2018
  • 1 reply
  • 1281 views

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.

This topic has been closed for replies.
Correct answer BenPleysier

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">

1 reply

BenPleysier
Community Expert
BenPleysierCommunity Expert
Community Expert
May 1, 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 is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
johns45317965
johns45317965Author
Known Participant
May 1, 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.

BenPleysier
Community Expert
BenPleysierCommunity ExpertCorrect answer
Community Expert
May 1, 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 is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices