Highlighted

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

Explorer ,
Apr 30, 2018

Copy link to clipboard

Copied

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.

Adobe Community Professional
Correct answer by BenPleysier | Adobe Community Professional

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

TOPICS
Dreamweaver CC 2014, Learn Dreamweaver

Views

623

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

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

Explorer ,
Apr 30, 2018

Copy link to clipboard

Copied

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.

Adobe Community Professional
Correct answer by BenPleysier | Adobe Community Professional

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

TOPICS
Dreamweaver CC 2014, Learn Dreamweaver

Views

624

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Apr 30, 2018 0
Adobe Community Professional ,
Apr 30, 2018

Copy link to clipboard

Copied

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;

     }


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 30, 2018 0
Explorer ,
May 01, 2018

Copy link to clipboard

Copied

Hi . 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.

style css2.png

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 01, 2018 0
Adobe Community Professional ,
May 01, 2018

Copy link to clipboard

Copied

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


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 01, 2018 0
Explorer ,
May 01, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 01, 2018 0
Adobe Community Professional ,
May 01, 2018

Copy link to clipboard

Copied

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.


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 01, 2018 0