Jump to content

newcoder1010

Members
  • Content Count

    415
  • Joined

  • Last visited

Community Reputation

3 Neutral

About newcoder1010

  • Rank
    Member

Recent Profile Visitors

23,874 profile views
  1. I got the second part working. Please advise on the status element how to float to right. Thanks! .views-field.views-field-title { top: 0; left: 16px; font-size: 18px;position:absolute; }
  2. One more question. Right now, image is sitting below the title. How can I place the title above the image? Please see the second image in the link.
  3. I made progress. .prop-row { position: relative; } .views-field.views-field-field-status { position: absolute; width: 100px; float: right; margin-top: -30px; } .views-field-field-house-selling-price { position: absolute; width: 100px; float: left; margin-top: -30px; } Both are now inside prop-row element. But status is sitting on top of price. I cant see the price. I do not have any control on html. How can I push status to the right side?
  4. Hello, HTML: <div class="prop-row"> <div class="views-field views-field-title"> <span class="field-content"> <a href="/node/159" hreflang="en">7x Euclid Avenue Building</a> </span> </div> <div class="views-field views-field-field-main-image"> <div class="field-content"> <img src="/sites/default/files/styles/medium/public/2020-03/town-homes_0.png?itok=_sxYxuaG" width="200" height="200" alt="ggfdg" typeof="foaf:Image" class="img-responsive"> </div> </div> <div class="views-field views-field-field-house-selling-price"> <div class="field-content">$45,345</div> </div> <div class="views-field views-field-field-status"> <div class="field-content">Active</div></div> </div> How can I place the price at bottom left corner of the image and place the status at the bottom right corner of the image? https://docs.google.com/document/d/19hif-4iyf2iMqWEnz0mIKjhKcBxwvZ_f07r11Ux8_8I/edit?usp=sharing Please advise!
  5. Thanks for your messages. I am not sure how to edit the html so active class will display in the source code depending on what I am on. If the active class is not visible in the source code, I guess my css wont work. Thanks!
  6. Hello, HTML: <div class="areas-box-list"> <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 area-loc"> <a href="../denver-county" target="_self"><br><span class="glyphicon glyphicon-map-marker text-primary"></span><span class="text-primary">Denver County</span> </a></div> <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 area-loc"> <a href="../arapahoe-county" target="_self"><br><span class="glyphicon glyphicon-map-marker text-primary"></span><span class="text-primary">Arapahoe County</span> </a></div> <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 area-loc"> <a href="../douglas-county" target="_self"><br><span class="glyphicon glyphicon-map-marker text-primary"></span><span class="text-primary">Douglas County</span> </a></div> <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 area-loc"> <a href="../jefferson-county" target="_self"><br><span class="glyphicon glyphicon-map-marker text-primary"></span><span class="text-primary">Jefferson County</span> </a></div> <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 area-loc"> <a href="../adams-county" target="_self"><br><span class="glyphicon glyphicon-map-marker text-primary"></span><span class="text-primary">Adams County</span> </a></div> <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 area-loc"> <a href="../broomfield-county" target="_self"><br><span class="glyphicon glyphicon-map-marker text-primary"></span><span class="text-primary">Broomfield County</span> </a></div> <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 area-loc"> <a href="../boulder-county" target="_self"><br><span class="glyphicon glyphicon-map-marker text-primary"></span><span class="text-primary">Boulder County</span> </a></div> <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 area-loc"> <a href="../gilpin-county" target="_self"><br><span class="glyphicon glyphicon-map-marker text-primary"></span><span class="text-primary">Gilpin County </span> </a></div> </div> CSS: .area-loc a:hover{ background:#04437a; } .area-loc a:active { color:white; background:#083a9a;;} Hover works just fine. Active does not work. I noticed that I do not have active class in html. I am not sure how to add the active class in html. Please advise!
  7. Thanks much! However, this link of code is bit confusing. background-image: linear-gradient(to left, rgba(10, 109, 233, 0.7), rgba(242, 235, 235, 0)); Changing from left to right and right to left makes difference. If I keep left, color gets applied right side and I keep right, color gets applied left side. How can I keep same color both sides? Below code gives more color on the top right than the top left but I like to have the same color entire top section. Please advise. .gradient.left { display: block !important; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background-image: linear-gradient(to left, rgba(10, 109, 233, 0.7), rgba(242, 235, 235, 0)); background-size: 100% 50%; background-repeat: no-repeat; height: 700px; }
  8. Hello, I have this gradient color works just fine which applies left side of the div element. .gradient.left { display: block !important; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: linear-gradient(90deg, rgba(52, 52, 52, 0.7) 43%, rgba(255, 255, 255, 0) 66%); background-image: linear-gradient(to right, rgba(16, 49, 90, 0.7), rgba(255, 255, 255, 0)); } 1. How can I modify the css to apply gradient on entire div element? 2. How can I modify the css to apply gradient on top 50% div element? 3. How can I modify the css to apply gradient on bottom 50% div element? 4. How can I modify the css to apply gradient center of the div element? After that, I will play with that to meet my requirements. Please advise!
  9. Hello, How can I underline steps similar to the image? https://drive.google.com/open?id=1mJv4iUX2Nsu627yQCSctHccKC6DV87a_ I started but it is not working as expected. <div class="steps-no col-xs-2 col-sm-2 col-md-2 col-lg-2"> STEP 1<br><span class="o">- </span><span class="r">- --</span> </div> <div class="steps-no col-xs-2 col-sm-2 col-md-2 col-lg-2"> STEP 2<br><span class="o">- </span><span class="r">- --</span> </div> <div class="steps-no col-xs-2 col-sm-2 col-md-2 col-lg-2"> STEP 3<br><span class="o">- </span><span class="r">- --</span> </div> <div class="steps-no col-xs-2 col-sm-2 col-md-2 col-lg-2"> STEP 4<br><span class="o">- </span><span class="r">- --</span> </div> span.o { color: blue; font-size: 20px; padding: 0; margin: 0; font-weight: bold; } I think my html is also wrong. Please advise!
  10. Hello, HTML: <div class="form-item js-form-item form-type-textfield js-form-type-textfield form-item-property-address js-form-item-property-address form-no-label form-group"> <label for="edit-property-address" class="control-label sr-only js-form-required form-required">Property Address</label> <input data-drupal-selector="edit-property-address" class="form-text required form-control" type="text" id="edit-property-address" name="property_address" value="" size="60" maxlength="255" placeholder="Property Address" required="required" aria-required="true"> </div> CSS: ::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: red; } ::-moz-placeholder { /* Firefox 19+ */ color: red; } :-ms-input-placeholder { /* IE 10+ */ color: red; } :-moz-placeholder { /* Firefox 18- */ color: red; } ::placeholder { color: red; } Font color is not changing to red. When I inspect in chrome, I could not see the source of the styling. Currently, I see placeholder color is dark. Please advise.
  11. Hello, I have the following css for anchor selectors. Everything works except for the visited links. When a visitor already on a page(i.e. news page), I like the "news" link to be colored yellow (visited anchor) which is not working. Please advise. /* unvisited link */ .navbar-nav > li > a:link{ color: white ; } .path-frontpage .navbar-nav > li > a:link{ color: #24678d ; } /* visited link */ .navbar-nav > li > a:visited, .path-frontpage .navbar-nav > li > a:visited{ color: yellow ; border: 1px solid #24678d; padding: 5px 15px 5px 15px; } /* mouse over link */ .navbar-nav > li > a:hover, .path-frontpage .navbar-nav > li > a:hover{ color: red; background:white; } /* selected link */ .navbar-nav > li > a:active, .path-frontpage .navbar-nav > li > a:active{ color: green ; }
  12. .img-responsive, .thumbnail > img, .thumbnail a > img, .carousel-inner > .item > img, .carousel-inner > .item > a > img { display: block; max-width: 100%; height: auto; max-height: 550px; width: 100%; } Now it is better than before. But the problem is that as I am screen sizes are decreasing, the images do not look good because it is trying to fit image on smaller screen with the same height. How can I fix it? Thanks!
×
×
  • Create New...