Announcement

Collapse
No announcement yet.

Inspirepress Skin How to change color on an Item

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • Inspirepress Skin How to change color on an Item

    Where do I change the color of this item its the Inspirepress theme. I want to change background color from gray to another color on the item that has the Your Daily Dose Of Awe Inspiring Insights

    Exploring the wonders of the amazing World around us!

    Of course I would be changing the text. That I have found without any problems

  • #2
    You can add some CSS into the Custom CSS area as below -

    To change both EZ Home Top and Bottom to use the same colour add -

    Code:
    #ez-home-top-container .ez-widget-area, #ez-home-bottom-container .ez-widget-area {
     background-color: rgba(1, 169, 213, 0.71);
    }
    To change just the EZ Home Top add -

    Code:
    #ez-home-top-container .ez-widget-area {
     background-color: rgba(1, 169, 213, 0.71);
    }
    To change just the EZ Home Bottom add -

    Code:
    #ez-home-bottom-container .ez-widget-area {
     background-color: rgba(1, 169, 213, 0.71);
    }
    Change the color to suit your needs.

    Comment


    • #3
      I will try that Thanks Andy. I also would be thinking that the rgb value could also be hex values as well

      Comment


      • #4
        Yep , It can be HEX

        Code:
        #ez-home-top-container .ez-widget-area, #ez-home-bottom-container .ez-widget-area {
         background-color: #01a9d5;
        }

        Comment


        • #5
          That is working its just that element that was giving me a headache. I also not sure how to change the font size or actual font and make the container box smaller or larger.

          Comment


          • #6
            For the H4 only in the EZ widget Home Top/Bottom you can adjust the default CSS by editing the default code below and adding it to Custom CSS - just change the bits you need. As before , just seperate the top and bottom (after the comma) if you want them to be different. Below is the default.

            Code:
            #ez-home-top-container .ez-widget-area h4, #ez-home-bottom-container .ez-widget-area h4 {
             margin-bottom: -20px;
             padding: 5px 10px 20px;
             color: #d50134;
             font-size: 60px;
             line-height: 1.2;
            }
            For any text in in the EZ widget Home Top/Bottom you can add to the CSS I already posted as below - Change/add what you need.

            Code:
            #ez-home-top-container .ez-widget-area, #ez-home-bottom-container .ez-widget-area {
             background-color: #01a9d5;
             padding: 5px 10px 20px;
             color: #333333;
             font-size: 18px;
            }
            For the size of the actual container try the CSS below -


            Code:
            #ez-home-top-container .ez-home-wrap , #ez-home-bottom-container .ez-home-wrap {
             max-width: 800px;
            }
            For the padding on the background/image adjust the CSS below. This is the default -

            Code:
            #ez-home-top-container, #ez-home-bottom-container {
             padding: 100px 20px;
            }
            Hope that helps a bit

            Comment


            • #7
              Thanks Andy that does help site is beginning to take shape. Is there a way to change the widgets background colors individually

              Comment


              • #8
                Yeah , can be done - NOTE - If you want to add any padding to the content inside the boxes you'll need to add the border-box css as shown below , if not , just delete that and the padding.
                if you don't add the border-box , your boxes will start to drop down from the row as it interferes with the column classes. Note the boxes are numbered.

                Code:
                #ez-home-middle-1 {
                 background: red;
                 padding: 5px;
                 box-sizing: border-box;
                }
                
                #ez-home-middle-2 {
                 background: green;
                 padding: 5px;
                 box-sizing: border-box;
                }
                
                #ez-home-middle-3 {
                 background: blue;
                 padding: 5px;
                 box-sizing: border-box;
                }

                Comment


                • #9
                  Thanks for your help on so many items. I have found that Dynamik has so many options and tweeks that it would take a long time to figure them all out.

                  Comment


                  • #10
                    How do I know what container is controlling what I now have a middle container with a white background I am just lost on how the coding is

                    Comment


                    • andytc
                      andytc commented
                      Editing a comment
                      Better to give us a URL , we can take a look and see what's happening
                  Working...
                  X