newcoder1010

Hi, I have this html. How can I apply css to $9000 only. <div class="views-field views-field-field-discount-price"> <div class="field-content"> <del> $9,995 </del> $9,000 </div> </div> This code makes all red. Instead, I like to style only $9,000. .views-field-field-discount-price {color:red; font-weight:bold;} Thanks.

I added this code and it did not work: .view-xpress-vehicles-inventory-in-atlantic-city-nj.table-striped .odd td{ background-color: #DCDCDC;} I guess this is overwriting by this: .table-striped > tbody > tr:nth-child(odd) > td, .table-striped > tbody > tr:nth-child(odd) > th { background-color: black;} Then, I simply copied this code and just changed the color and that also did not work as below: .table-striped > tbody > tr:nth-child(odd) > td, .table-striped > tbody > tr:nth-child(odd) > th { background-color: red;}

Thank you for the information. I will find out on that how to turn it off.

Now, I have this code. Height is still 50px. .views-table th { background: none repeat scroll 0 0 gray; color: white; }

I have removed this code: .view-xpress-vehicles-inventory-in-atlantic-city-nj .views-field-field-main-image {width:200px; height:100px;} I have added this code: .views-table th { background: none repeat scroll 0 0 gray; color: white; height: 40px; margin-top: 10px; } When i inspect the header on my page, I see thead dim is 1140px x 50px. I expected the height to be 40px instead. Can you advise?

Hi, This is my site. I created a views table and I simply try to give height to table thead but it is not working. If you could help me with css, please. http://godrupal.info/xpressauto/?q=xpress-vehicles-inventory-in-atlantic-city-nj <table class="views-table cols-5 table table-hover table-striped"> <thead> <tr> <th class="views-field views-field-field-main-image"> Image </th> <th class="views-field views-field-field-car-make"> Make </th> </tr> </thead> </table> .views-table th {background:gray;height:40px; color:white;} background colors and colors are working but height is not working. when I inspect in chrome it says dim is 1140px x 100px for thead. By inspecting, I could not find out which file has the dim info. Can you help me to make the th height 40px? Thanks.

I do appreciate your time but I am sorry that I could not follow you. I use a tool for UI not able to give any selector if. Instead, can I fix using css?

Hi, I created a views table page. I like to have different background colors for devices which are minimum 993px. I wrote this css. It works for even rows but not for odd rows. @media (min-width: 993px){ .view-xpress .odd{ background-color: #DCDCDC;} .view-xpress .even{ background-color: #F5F5F5;} Then, I inspected in chrome and I see this code overwriting the odd rows: media = 'all' .table-striped > tbody > tr:nth-child(odd) > td, .table-striped > tbody > tr:nth-child(odd) > th { background-color: black;} } How can i force to change to my code so i get my colors? Thanks.

Hi, I have created a slideshow. I can see the active field counter with gray background and inactive field counters with white background. It works fine in desktop version. I like to do the similar for mobile and tablet versions. However, it is not working for me. If you could visit my site and make the screen smaller and then make it 'less than 768px for mobile' and 'greater than 768px and less than 992px for tablet', you will notice that it is not working for mobile and tablets. Sometimes i do see it is working thou. I simply like to make the active image gray and inactive images white background in the slideshows. Slideshow class is .M-Slideshows Field counters wrapper class is views-slideshow-controls-bottom If you could inspect my page in chrome and help me with css, it will be really great. http://godrupal.info/dcyacht/ Thanks.

Many thanks. Now it worked.

If you could visit my site. Please make sure the screen less than 768px. This is for mobile. http://godrupal.info/dcyacht/

I am not understanding. I am trying to put the logo in the center. How display: block will put the logo in the center? Margin-left:10px; works but auto does not work.

It did not work. if you could visit my site, then scroll down to subscribe to our mailing list block, you may see why it is not working. Please make sure the screen less than 768px.This is for mobile. http://godrupal.info/dcyacht/

Hi, Below margin-left and margin-right auto is not working. I just want to put the logo in the center. Can you help? <section id="block-block-13" class="block block-block M-logo col-md-12 col-xs-12 contextual-links-region clearfix"> <div class="contextual-links-wrapper contextual-links-processed"> <a class="contextual-links-trigger" href="#">Configure</a><ul class="contextual-links"><li class="block-configure first last"> <a href="/dcyacht/?q=admin/structure/block/manage/block/13/configure&destination=node/49">Configure block</a></li></ul> </div> <a class="M-logo-a" href="/" title="Home"> <img src="sites/img/Mobile-DC-Yacht-Logo.png" alt="Home"> </a> </section> CSS: .M-logo .M-logo-a { margin-left: auto; margin-right:auto; width:200px; } Thanks.

Hi, I am trying to put the clear class in a separate line but it is not working. Can you help? HTML: <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div> CSS: .clear { display:inline;} /* I also tried inline-block; it did not work. */ Thanks.

I greatly appreciate your time. When I created my region in template file, I wrote this to create a new region: <div class="Very-Top1 "> <?php print render($page['main-VeryTop1']); ?> </div> Then I created few menu blocks and placed them in that region. Now, I re-wrote the above code as : <div class="container"> <div class="Very-Top1 row "> <?php print render($page['main-VeryTop1']); ?> </div> </div> Still did not work. Then I changed the fixed position to 175px just to test. It is doing better. Thank you for that. I will think about javascript advice that you gave me. For now, my question would be I like to keep the logo block under the menus. So, i gave logo region fixed position: 75px. Instead, can I give any percentage so logo will go down automatically when I make the screen smaller? I am just trying to make it responsive. I made progress but not completely. Also, I did not understand what you mean by "At most you should only have one single element with position: fixed and put all the other elements inside of that one. "

hi, I have several menu blocks and I placed all to the same region. My sitehttp://godrupal.info/dcyacht/. As I try to make the screen smaller (about 1000px), I have noticed that #block-system-main-menu is overlapping over #block-menu-menu-event. So, event menu can not be seen. All the menus at the top can be seen. Problem starts when I make screen smaller but greater than 993px. I am using bootstrap theme. Is there any bootstrap css class for it or I need to apply my own css. I did not give you any html/css because I am confused which one to give you. If you could inspect in chrome, it will be so helpful. Thanks.

Hi, I have this css for image slideshows: .M-Slideshows .views-slideshow-cycle-main-frame.views_slideshow_cycle_teaser_section, .views-slideshow-cycle-main-frame-row.views_slideshow_cycle_slide.views_slideshow_slide { height: 200px !important; min-height: 200px; width: 100% !important; } .M-Slideshows .views-slideshow-cycle-main-frame-row-item .field-content img { height: 200px; min-height: 200px; width: 100%; } When I visit chrome, I can see the slideshow images 100% fine in different zooming settings like 75%,100%,.. But when I visit the page in IE and then I change the zooming to different settings, I dont see the entire images. It is being truncated as I am increasing the zooming. Please advise. Thanks.

Hi, I have this css: @media (min-width: 993px){ /* I have two other regions before this */ .views-slideshow-cycle-main-frame-row-item .field-content img { height: 650px; min-height: 650px; width: 100%; } } I visited the slideshows in a screen which resolution is 1920 x 1080, it looks good. I can see the entire image once I visit the page without scrolling down. I visited the slideshows in another screen which resolution is 1366 x 768, I can see the part of the image. To see the rest of the image, i need to scroll down to see the rest. I am not sure how to solve this problem. How can I specify the height for resolution is 1366 x 768 so when people visit the page they can see the entire image on the home page? http://godrupal.info Thanks.

Hi, I have the below html and css. Css is not doing anything. What mistake am I making here? HTML: <p class="hours1"> <b> OPENING HOURS </b> Seven Days a Week 10 am until 1am </p> CSS: .hours1 p{border:2px; color: red;} Thanks.

<div class="item-list"> <ul> <li class="views-row views-row-1 views-row-odd views-row-first"> <div class="views-field views-field-title"> <span class="field-content"><a href=atic-awd-4dr-sedan">2009 Mercedes-Benz E-Class E350 4MATIC AWD 4dr Sedan </a></span> </div> ... Hi, I have the list of items. I see a bullet points left to each item. How can I apply css to remove the bullets? Thanks

HTML: <div class="view view-mobile-view view-id-mobile_view view-display-id-block"> <div class="view-content"> <div class="item-list"> <ul> <li class="views-row views-row-1 views-row-odd views-row-first"> <div class="views-field views-field-title"> </div> <div class="views-field views-field-field-main-image"> <div class="field-content"> <img typeof="foaf:Image" class="img-responsive" src="fault/files/1_2.jpg" width="640" height="360" alt=""></div> </div> <div class="views-field views-field-field-discount-price"> <div class="field-content">$2</div> </div></li> <li class="views-row views-row-2 views-row-even"> ..... </div>

Hi, I dont have the html yet. I am listing some items. Three fields get listed: title, img, price. Currently, I see title first row, image second row and price third row. Instead of the placing price on the 3rd row, I like to place the price over the image. I have the below css classes for title and image: .view-display-id-block .views-field-title { width: 100%; margin-top:10px; font-size:15px;margin-right:10px; } .view-display-id-block img{ width: 90%; height:200px;margin:10px;margin-left:0px; } Now, I have one more class under the same parent '.view-display-id-block'. Class name for price: views-field-field-discount-price. How can I put the price on the image using css?

Hi, I am developing this site in drupal. I have two regions placed on the top of the screen. Each region has multi blocks. Currently verytop1 region is fixed position and working fine. Instead i like the verytop2 region to be fixed. This is working because top1 is fixed. .region-main-verytop1 { position: fixed;z-index: 1030; right: 0;left:0;width:100%; background: black; } .region-main-verytop2 { margin-top: 80px; } Now, I re-wrote this to make the top2 fixed. But after that top1 and top2 look so odd. If you could help placing the top2 fixed position. Note that top2 region has image and block. I like the entire region to be fixed not the image and block only. .region-main-verytop1 { right: 0;left:0;width:100%; background: black; } .region-main-verytop2 { top: 80px; position: fixed;z-index: 1030; } If you like to inspect my page in chrome, http://godrupal.info Thank you so much.

Hi, I have four fields: When, Start, How long, Number Of people. Field Name - When Field Wrapper Class - When_R Field Name - Start Field Wrapper Class - Start_R Field Name - How long Field Wrapper Class - HowLong_R FIeld Name - Number Of people Field Wrapper Class - NumberOfPeople_R HTML: <div class="When_R"> <label> ... </label> <div class="webform-container-inline webform-datepicker"> ... </div> </div> <div class="Start_R"> <label> ... </label> <select> ... </select> </div> <div class="HowLong_R"> <label> ... </label> <select> ... </select> </div> <div class="NumberOfPeople_R "> <label> ...</label> <input..."> </div> How can I place all the labels to the left and all the fields to the right? I like to see all the labels and fields aligned straight. Can you please help?