18 Replies Latest reply on Oct 21, 2015 10:12 AM by David_Powers

    coding updates to CSS

    TWB2015 Level 1

      I've found it necessary to have changes in bootstrap.css influences. Also have been told by tech support not to edit bootstrap.css file. As this will corrupt the bootstrap.css and result in having to reinstall dw cc. 1st question, why can you not just have a bootstrap.css backup to restore from if problems? 2nd question, what is the process and syntax of editing another css file, example, style.css, which is already created for image class editing,  to change the fluid container padding. desired change is padding-left: 0px verses 15px. below is outtake from the bootstrap.css file info;

       

      .container {

        margin-right: auto;

        margin-left: auto;

        padding-left: 15px;

        padding-right: 15px;

        • 1. Re: coding updates to CSS
          Jon Fritz II Adobe Community Professional & MVP

          You could keep a backup, if you like, but there's really no reason to monkey with the bootstrap file at all.

           

          All you need to do, in order to override the css of the bootstrap.css file, is link to another file after it in the <head> of your page and use the same selector with different settings. For example, you give...

           

          .container {

            margin-right: auto;

            margin-left: auto;

            padding-left: 15px;

            padding-right: 15px;

           

          ...as the css in bootstrap.css. To override it, you would simply add another .css file after the bootstrap.css link in your <head>...

           

          <link rel="stylesheet" href="bootstrap.css">
          <link rel="stylesheet" href="override.css">

           

          ...then set whatever new attributes you want under the same selector in that second stylesheet (any attribute not reset will still pull from the first .css file in the cascade)...

           

          .container {

            padding-left: 0px;

          }

           

          The C in CSS is for cascading. In the most basic sense, the last attribute:value written into your css is the attribute:value used between like selectors (.container and .container in this case).

          • 2. Re: coding updates to CSS
            Nancy OShea Adobe Community Professional & MVP

            The best approach IMO is to create a separate external style sheet with your overriding Bootstrap styles.  This ensures you're not breaking the main BS CSS file.  And if you decide later to remove the overriding style, you can find it right away. Fewer problems that way.

             

            I like to use LESS or SASS to manage my CSS.  But if you're not an advanced BS user yet, you can download a customized CSS file from GetBootstrap.

            http://getbootstrap.com/customize/

             

             

            Nancy O.

            • 3. Re: coding updates to CSS
              TWB2015 Level 1

              Saved the link Nancy, thanks

              • 4. Re: coding updates to CSS
                TWB2015 Level 1

                     Jon,

                So far have caught on to making another css file and linking it and will add the code update to that file for the desired change. What has me baffled is how much change has happened to DW CC. I was hand coding HTML in 1996 and have created websites with various programs over the years. After a few years away from the subject, have found that DW CC has tossed a large part of the GUI ability in the responsive web design evolution.  

                • 5. Re: coding updates to CSS
                  MurraySummers Level 8

                  DW has changes to keep up with the changes in the web. Your 1996-vintage sites would not cut the mustard today...

                  • 6. Re: coding updates to CSS
                    Nancy OShea Adobe Community Professional & MVP
                    .container {

                      margin-right: auto;

                      margin-left: auto;

                      padding-left: 15px;

                      padding-right: 15px;

                    Bootstrap .container is a centered div.

                    If you want 100% width, use .container-fluid instead.

                     

                    Being familiar with the various built-in Classes is essential.  When learning BS, I spent 3 days making test pages with various BS classes & components.  It's the best way I know to learn BS before you begin a project.

                    http://www.w3schools.com/bootstrap/

                     

                    Nancy O.

                    1 person found this helpful
                    • 7. Re: coding updates to CSS
                      TWB2015 Level 1

                      Murray,

                      The reference to 1996 HTML hand coding was not the standard, but the reference to how long I've been doing this. Adobe with Dream Weaver CC has not lived up to the sales pitch given when I purchased a years subscription of Creative Cloud. I was told that tech support was available in learning the new version. What I found out often doing a refresher of this version is tech support does not even try to help! Also basic design in the GUI is a maze, and the forum ignores the use of it.

                       

                      FYI; I've purchased and designed with many versions of Dreamweaver, if Adobe does not live up to their sales pitches, they are going to have less customers.

                       

                      your comment Murray is unneeded, and does not help resolve the issue

                      • 8. Re: coding updates to CSS
                        Nancy OShea Adobe Community Professional & MVP

                        I don't know who told you or where you got the false impression that Tech support was going to train you to use DW.  In the many years I've been using Adobe products, tech support has never trained people to use the software. That's not their job.   Customer Care is even less informed about  the software.  Customer Care's main mission is to help people with subscriptions, activation and billing issues.

                         

                        Training has historically been performed by Adobe Certified Experts like Murray Summers and David Powers -- through books, articles, videos, and support in this forum.  Murray's one of the really good guys here. 

                         

                        Incidentally, I agree with what Murray said.  The GUI had to change to keep pace with the changes in code standards.  If things seem more complicated now it's because the code is more complicated now. 

                         

                         

                        Nancy O.

                        • 9. Re: coding updates to CSS
                          osgood_ Level 8

                          TWB2015 wrote:

                           

                          Also basic design in the GUI is a maze, and the forum ignores the use of it.

                           

                           

                          May I suggest you restart as you left off and learn to hand-code instead of using the UI. If you could do it back then you can do it now. The only way you'll master website construction is by working directly in the coding environment. Relying on UI's, frameworks and all the other add-ons out there is just like trying to guess what's infont of you, while you're bllnd-folded with your hands tied behind your back.

                           

                          Anyone who can provide any sort of useful answers in the forum doesn't often, if ever, use the UI for a reason and you won't get many answers from those that do because they usually haven't got a clue what the hell they are doing.

                          • 10. Re: coding updates to CSS
                            TWB2015 Level 1

                            RE: Hand Coding vs. GUI

                             

                            Agree in part, and have used hand coding off and on over the years for trouble shooting problems. However the whole reason for PURCHASING programs like Dreamweaver is to accelerate designing. Appreciate genuine helpful comments in the process of doing a refresher on the use of GUI or the necessary coding.

                            • 11. Re: coding updates to CSS
                              TWB2015 Level 1

                              RE: About tech support in the use of Adobe Dream Weaver

                               

                              Actually when I purchased a the years subscription to creative cloud I was told tech support was given in "HOW TO" issues. That really has been the opposite of phone support. The forum is occasionally helpful with GUI, but for the most part has echoed the dissatisfaction about the GUI interface.

                               

                              Appreciate your helpful comments Nancy about resources. What Adobe sales and support has not lived up too gets to be a tiresome subject. However the dissatisfaction with Dreamweaver CC GUI interface is being echoed by the people in forums often.

                               

                              What I disagree with, is the disrespectful slights speculating about my over all skills. Honestly is not Adobe compensating people like Murray and others? Is it Adobe's policy to be disrespectful to their customers?   

                              • 12. Re: coding updates to CSS
                                Nancy OShea Adobe Community Professional & MVP

                                The opinions expressed here are our own, not Adobe's.

                                Unless you see a STAFF badge by a participant's name, you are not being helped by Adobe.  You are being helped by a fellow product user just like yourself.  Adobe does not pay us for participating in these forums. 

                                 

                                Nancy O.

                                • 13. Re: coding updates to CSS
                                  TWB2015 Level 1

                                  RE: comments

                                   

                                  Adobe phone support yesterday stated they have "paid" individuals to help in the forms. Staff badged adobe employees? Is there not some consideration given by Adobe for correct answers to non-staff badged participants in answering questions? 

                                  • 14. Re: coding updates to CSS
                                    David_Powers Adobe Community Professional (Moderator)

                                    TWB2015 wrote:

                                     

                                    the dissatisfaction with Dreamweaver CC GUI interface is being echoed by the people in forums often.

                                    I think Adobe is well aware of those complaints. Big changes to the Dreamweaver UI are in the works, and there will be a public beta of the proposed changes: Next Generation of Dreamweaver : Adobe Dreamweaver Team Blog.

                                    • 15. Re: coding updates to CSS
                                      TWB2015 Level 1

                                      Appreciate acknowledgement of the need for Dreamweaver CC GUI needing improvement.

                                       

                                      Longtime customer of GUI design software; Dreamweaver as a Adobe product, Dreamweaver as a Macromedia product, ColdFusion, FrontPage..... There has always been a need to debug via coding. This is the first time to have have all levels of support repeatedly state that the GUI is not efficient or desirably means of designing this often. 

                                      • 16. Re: coding updates to CSS
                                        Preran Adobe Employee

                                        Hi TWB2015,

                                         

                                        Let me do my best to answer some of those questions. Some have already been answered by the experts here.

                                         

                                        • Why are forums the best place for How To issues?
                                          • Because most of these issues are best solved through collective expertise. You could be on a call for hours with one person trying to get to all possible scenarios, or you could be here where we receive around 30 posts every single day covering multiple-scenarios. IMO, the one-to-many help provides for a better experience as far as How-To questions go.
                                          • Also, having a post on the forum answered makes it accessible to the millions of users that use Google to search for answers, and provides them with the quickest possible help mechanism.
                                        • Does Adobe have paid staff on the forums?
                                          • While people like me with a staff badge are Adobe employees and are compensated for our working with the company, the experts here voluntarily help people like you, taking time off from their busy schedules. Because this is a democratic forum, we rarely censor content, relying on the community instead to make sure that we are clean. All opinions expressed here are personal, and you are free to disagree with them as long as they are not deliberate and harmful, in which case I suggest your escalating them to people like me.

                                        Thanks,

                                        Preran

                                        • 17. Re: coding updates to CSS
                                          Nancy OShea Adobe Community Professional & MVP

                                          User badges

                                           

                                           

                                          Every user has a badge indicating their status:

                                           

                                          Member Member: Normal users with no special memberships.

                                           

                                          STAFF Adobe Employee: A verified member of staff.

                                           

                                          ACP Adobe Community Professional: An officially-recognized product expert who can speak on behalf of Adobe, but not an employee.

                                           

                                          UGM User Group Manager: The leader of an official Adobe User Group, again not an employee.

                                           

                                          MVP MVP: Forum moderators and experts selected by Adobe. MVPs may also be ACPs or UGMs, those affiliations are shown on their profile page.

                                           

                                          Nancy O.

                                          • 18. Re: coding updates to CSS
                                            David_Powers Adobe Community Professional (Moderator)

                                            TWB2015 wrote:

                                             

                                            RE: comments

                                             

                                            Adobe phone support yesterday stated they have "paid" individuals to help in the forms. Staff badged adobe employees? Is there not some consideration given by Adobe for correct answers to non-staff badged participants in answering questions?

                                            There is only one staff member who regularly helps out in the Dreamweaver forum. He's also responsible for several other Adobe forums. The vast majority of questions are answered by non-staff people, some of whom do receive a free subscription to the Creative Cloud in recognition of their efforts. You can see the details here: https://forums.adobe.com/docs/DOC-2327#jive_content_id_Rewards__incentives.

                                             

                                            I'm sorry if you feel you've been treated disrespectfully by others. Forum posts can sometimes seem blunt, even if that wasn't the poster's original intention. As someone who has written books and created video courses about Dreamweaver over the past 10 years, I can sympathize with anyone who finds the UI confusing after a break of several years. Adobe has made a lot of changes to try to keep up with changing web standards, while trying to keep the familiar interface. But I think that policy has reached its limit.

                                             

                                            As I pointed out in another post, big changes for the Dreamweaver UI are in the pipeline. I spent some time talking to the Dreamweaver product manager at the Adobe MAX conference in Los Angeles earlier this month. He has some ideas that sound very good, and which should appeal to developers with your length of experience. I look forward to seeing how DW develops over the next year.

                                             

                                            If you have specific questions about the use of the UI, post separate threads and ask away. I'm sure people will help as much as they can.

                                             

                                            As for the "tech support" advising you that editing the Bootstrap style sheet would corrupt it, I think the correct description of such "advice" is BS. The Dreamweaver New Document dialog box generates a custom version of bootstrap.css depending on the breakpoints that you specify in the Customize section. The style sheet is made read-only to encourage you to attach a separate style sheet with your custom styles. There's nothing to stop you from making bootstrap.css editable. However, if you create a new Bootstrap page in the same Dreamweaver site, you risk losing your custom styles if you select the "Create new" radio button. In fact, selecting "Create new" is how you would reset the styles if you decide to ditch your changes. Having said that, creating a separate style sheet to override the Bootstrap defaults is, in my view, the better approach.