Customer Portal

Get Involved. Join the Conversation.

Topic

    Marco Canada
    Applying bootstrap themeAnswered
    Topic posted May 11, 2016 by Marco CanadaRed Ribbon: 250+ Points 
    588 Views, 11 Comments
    Title:
    Applying bootstrap theme
    Content:

    Hello,

    Can anybody help me understand how to apply a bootstrap style css to the customer portal forms? I am pretty new to Oracle Right Now and have no idea how to do this. Tried to find documentation on it, but no luck.

     

    Thanks

    Version:
    Customer Portal
    Code Snippet:

    Best Comment

    Barrilito van Dijk

    Hi Marco,

    You can not add classes to the <rn:widget /> tags. These are OSC widgets which only can take some (optional) parameters. In a widget there is a reference to some specific styling for that widget. As you are probably working with a standard widget (an not a custom one), it would be easier and quicker to add some styling to the site.css file in your themes folder which is located in the assets folder.

    If you are not that familiar with customer portal development, perhaps look here first to learn about everything related to the customer portal.

    Important for you is to know:

    • on which page do you use the widget
    • which template does it use
    • which theme is used in that template
    • change the site.css of that theme and deploy the changes
    • Or, if you have a lot of styling to add, include it in the template as a link to a file

    Hope this helps. Regards.

    Comment

     

    • Rajan Davis

      You would have to make a custom version of the widget and apply it to the source (most likely the view.php) of that widget.

      Also, make sure you have the bootstrap css in your template file (the file that is the template for your support site).  

    • Barrilito van Dijk

      Hi Marco,

      You can not add classes to the <rn:widget /> tags. These are OSC widgets which only can take some (optional) parameters. In a widget there is a reference to some specific styling for that widget. As you are probably working with a standard widget (an not a custom one), it would be easier and quicker to add some styling to the site.css file in your themes folder which is located in the assets folder.

      If you are not that familiar with customer portal development, perhaps look here first to learn about everything related to the customer portal.

      Important for you is to know:

      • on which page do you use the widget
      • which template does it use
      • which theme is used in that template
      • change the site.css of that theme and deploy the changes
      • Or, if you have a lot of styling to add, include it in the template as a link to a file

      Hope this helps. Regards.

    • Marco Canada

      Thank you guys, this is helpful...

    • Marco Canada

      Guys, I am trying to make changes to the site.css files, but they do not take. Viewing the page code for my "Ask a question page", I noticed the path for the css is "/euf/generated/optimized/1462282845/templates/myclient.themes.clorox.SITE.css".

      Any pointers here, I couldn't find anything on the documentation.

    • Rajan Davis

      Make sure you are in development mode, that link is for the the minified version of your site.css.

    • Kristi A. Karels

      There may be widget css that is over-riding the site.css. 

      You can see the widget css in the themes folder (for either desktop or mobile). 

      dav/cp/customer/assets/themes/standard/widgetCss

       

      You can edit any of the widget CSS.  Typically the element class or ID naming is very similar to the file-name.

    • Dietrik

      I vote for Barrilito's answer.

    • Allen Conquest

      If I add a link to our own custom CSS file which is located in the standard theme folder, when this file is updated it also updates the production site. How can I use our own custom CSS file, but have different versions in each mode (like the site.css file which automatically gets deployed to the generated folders) ?

    • Shiloh Madsen

      So I just want to confirm that there is still no easy way to be able to add a css class to a given element in a view. This makes the application of a responsive framework challenging at best for usage, is there anything on the roadmap to be able to more easily edit the attributes that are part of a widgets view?

    • Aaron Kirschner
      Shiloh Madsen said:

      So I just want to confirm that there is still no easy way to be able to add a css class to a given element in a view. This makes the application of a responsive framework challenging at best for usage, is there anything on the roadmap to be able to more easily edit the attributes that are part of a widgets view?

      View original

      I'm in the same boat here.Given the age of the original post, you might want to create a new post and see if that gets a response.

    • Ashley Wilson

      The outermost html element created by visual widgets used in the page usually (yes, there are exceptions) have the class name

      rn_WidgetName
      

      This could be used to target the element and its children in a custom css file.

      There are many widgets which contain multiple widgets within them, or conditionally use other widgets based on some attribute. For example, the "input/FormInput" widget uses the "input/TextInput" widget when the rn:widget tag's name attribute is set to a text field, such as Contact.Name.First. In this case, the outermost html element has the class rn_TextInput.

      As for the styles being applied to all environments, that's probably because the file was added to the page using the usual HTML method of hard-coding the path to it. The proper way to do this is to add the relative path to the css file in the "css" attribute of the rn:theme tag in the template or the page (the latter if the page doesn't use a template). For example, if the css file is located at /cp/customer/assets/themes/standard/path/to/custom.css, then the theme tag would be:

      <rn:theme path="/euf/assets/themes/standard" css="site.css, path/to/custom.css"/>
      

      This will let you have different styles being applied to to different environments; you would stage / promote the custom.css file when changes are ready to be propagated up.