newcoder1010

"Are these classes a relation to this link being hidden?" 'active-trail active' I am not sure I understand you. All this menu links simply visible to public. Active-trail active displays for node/72 because I was on that page while I inspected in google chrome. Now I am on node/49 and inspected in google chrome below is the html: <ul class="menu nav"><li class="first leaf active-trail active"><a href="/?q=node/49" class="active-trail active">Home</a></li> <li class="leaf"><a href="/?q=node/55">Plan an Event</a></li> <li class="leaf"><a href="/?q=node/52">Charters</a></li> <li class="leaf"><a href="/?q=node/72">Plan an Event</a></li> <li class="leaf"><a href="/?q=node/66">Yacht Finished Business</a></li> <li class="leaf"><a href="/?q=node/62">Yacht Celebrity</a></li> <li class="last leaf"><a href="/?q=node/73">Contact Us</a></li> </ul> "You can't use attribute selector for href to target '/?q=node/72' because it will only hide the anchor not its parent 'li'. You could use nth-of-type for newer browsers, is another option." As you can see i have node numbers repeated. Only option i have is css not html. This is for responsive site. I can display one node in mobile and other node in desktop. So I created different nodes/menu links for different devices. How can I write css to hide a specific menu link?

I like to hide it using css. I am not sure how to specify the node=72 item. I can do first and last not the others. Can you please help?

Hello, I have the below code. How can I hide the 4th item whose node = 72? <ul class="menu nav"> <li class="first leaf"><a href="/?q=node/49">Home</a></li> <li class="leaf"><a href="/?q=node/55">Plan an Event</a></li> <li class="leaf"><a href="/?q=node/52">Charters</a></li> <li class="leaf active-trail active"><a href="/?q=node/72" class="active-trail active">Plan an Event</a></li> <li class="leaf"><a href="/?q=node/66">Yacht Finished Business</a></li> <li class="last leaf"><a href="/?q=node/62">Yacht Celebrity</a></li> </ul> Thanks.

You are so great. Thank you.

<section id="block-multiblock-2" "> <ul class="menu nav"> <li class="first leaf"><a href="https://xxx.com" title="">F</a></li> <li class="last leaf"><a href="https://abc.com/" title="">T</a></li> </ul> </section> This is the html I have. I dont have access to html file. I am using some tool and it will hard to find the template file to make changes in the html file. I like to change it in css. I simply like to change the title F by an image and replace the title T by a different image. I wrote this css. Now, i can see image and title. Either I like to replace the title by image or just hide the title. How can I write the css to do it? #block-multiblock-2 li { float: left;padding:5px;} #block-multiblock-2 .first { background-image: url("facebook.png"); background-size: 15px 20px; background-repeat: no-repeat;} #block-multiblock-2 .last { background-image: url("twitter.png"); background-size: 15px 20px; background-repeat: no-repeat;}

Hi, I am developing the site in drupal. I have two regions top of the screen. I placed few blocks in the two regions. I simply like to place the both regions fixed position on the very top of the screen. So when I scroll down, all blocks in the two regions remains same. Now, it is working somewhat. Everything in the top two regions remain same when I scroll down but other blocks below the regions are overlapping. How can I place the two regions on top of screen fixed position without affecting anything on the page? .region-main-verytop1 { height: 100px; position: fixed; z-index: 1030; right: 0; left: 0; } .region-main-verytop2 { height: 200px; position: fixed; z-index: 1030; right: 0; left: 0; top: 100px; bottom: 90px; } Link to my site: http://godrupal.info Please advise.

Hi, I have the below html: <li class="last leaf"><a href="https://m.facebook.com/xxx" title="">F</a></li> I wrote the below css to put a background image. .last { background-image: url("/facebook.png"); background-size: 35px 40px; background-repeat: no-repeat;} I can see the background image but I do not want to see the title. How can I get rid of the title? Title I refer the letter F. I simply like to replace the letter F by the image. Thanks.

Hi, I have a div class call callus I have slideshow classes as below: .page-node-62 .views-slideshow-cycle-main-frame-row-item .field-content img { height: 400px; min-height: 400px; width: 100%; } .page-node-62 .views-slideshow-cycle-main-frame.views_slideshow_cycle_teaser_section, .views-slideshow-cycle-main-frame-row.views_slideshow_cycle_slide.views_slideshow_slide { height: 400px !important; min-height: 400px; width: 100% !important; } I like to place the call us class on the top of slideshow ( left side, height = same as image, width = 85px). I like to see the slideshow behind the callus class. Callus class should be remain fixed. How can I do it please?

Hi, I manually saved two images with two different widths but same height of 400. After upload the images, I wrote the below css. My expectation was to see the full 400 height image and I am not seeing it. Images are trying to get larger height than they got smaller height. Images are being cropped at the bottom. Can you please help? @media only screen and (min-width: 768px) { .views-slideshow-cycle-main-frame.views_slideshow_cycle_teaser_section, .views-slideshow-cycle-main-frame-row.views_slideshow_cycle_slide.views_slideshow_slide { height: auto !important; min-height: 400px; width: 100% !important; } .views-slideshow-cycle-main-frame-row-item .field-content img { min-height: 400px; height: auto; width: 100%; } } http://godrupal.info/ I am using bootstrap theme in drupal. When I make the screen width smaller little by little i can see the full height. Is it something to do with media query? My goal is to make it 100% width and 400px height for any screen wider than 768px. Thanks.

You are so great. .views-slideshow-controls-bottom {width: 250px; margin-left: auto; margin-right: auto;} Now I am good. Thanks.

I am not sure what is the target / parent element in this case? If you could help. HTML: <div class="view view-slideshowv view-id-slideshowv view-display-id-block view-dom-id-98c96e737f015059304d6897093d609a"> <div class="view-content"> <div class="skin-default"> <div class="views-slideshow-controls-top clearfix"> <div id="widget_pager_top_slideshowv-block" class="views-slideshow-pager-fields widget_pager "> ... </div> </div> .... </div> <div class="views-slideshow-controls-bottom clearfix"> ..... </div> </div> CSS: .views-slideshow-controls-bottom {margin-left: auto; margin-right: auto;}

Hello, I have the below code working as expected in IE and chrome in my computer. Below code put all in the same row. #block-webform-client-block-53 {float:right;}/* Name field */.CallMe_Name_R {display:inline-block; width: 40%;float:left;padding-right: 5px; padding-top:25px; margin-right: 5px; }.CallMe_Name_R input {width:85%; float:right;}.CallMe_Name_R label {width:10%; float:left;}​/* Phone field */.CallMe_Phone_R {display:inline-block; width: 40%; float:left; padding-top:25px;margin-right: 5px;}.CallMe_Phone_R input {width:85%; float:right;}.CallMe_Phone_R label {width:10%; float:left;}​/* Submit buuton */.webform-client-form-53 .form-submit {float:left; display: inline-block; margin-top:25px; background-color: #4682B4; color: #FFFFFF;} When I visit the page using another computer, I see labels and submit button went up slightly in IE and browser. How can I fix this? Thanks.

Hi, I have two menus. I like to place main menu to left and social menu to the right top corner. Now, both menus are on the same row top left corner and Social menu is on top of main menu. #block-system-main-menu .menu{ float: left; background-image: url("black.png") ; position:absolute;overflow: hidden; }#block-menu-menu-social .menu { float: right; background-image: url("black.png"); position:absolute; overflow: hidden;} How can I place main menu top left corner of screen and social top right corner of screen? Can you please help?

Hi, I wanted to place the below wrapper in the center. Below code does not work: .views {margin-left: auto; margin-right: auto;} But, If i write this, then margin-left works. .views{margin-left: 500px; margin-right: auto;} Why the first code does not put the wrapper in the center. First code does nothing. Please advise. Thanks.

Hi, I have a slideshow with 5 images working fine. I would like to place the sliders buttons/pagination on the same row. I also like to place them in the center. I have the below html i got from inspecting the page in chrome: <div class="views-slideshow-controls-bottom clearfix"> <div id="widget_pager_bottom_xpress_car_sales-block" class="views-slideshow-pager-fields "> <div id="views_slideshow_pager_field_item_bottom_xpress_car_sales-block_0" class="views-slideshow-pager-field-item "> <div class="views-field-counter"> <div class="views-content-counter"> 1 </div> </div></div><div id="views_slideshow_pager_field_item_bottom_xpress_car_sales-block_1" class="views-slideshow-pager-field-item views_slideshow_pager_field_item views-row-even"> <div class="views-field-counter"> <div class="views-content-counter"> 2 </div> </div></div><div id="views_slideshow_pager_field_item_bottom_xpress_car_sales-block_2" class="views-slideshow-pager-field-item views_slideshow_pager_field_item views-row-odd"> <div class="views-field-counter"> <div class="views-content-counter"> 3 </div> </div></div><div id="views_slideshow_pager_field_item_bottom_xpress_car_sales-block_3" class="views-slideshow-pager-field-item views_slideshow_pager_field_item views-row-even"> <div class="views-field-counter"> <div class="views-content-counter"> 4 </div> </div></div><div id="views_slideshow_pager_field_item_bottom_xpress_car_sales-block_4" class="views-slideshow-pager-field-item views_slideshow_pager_field_item views-row-odd views-row-last"> <div class="views-field-counter"> <div class="views-content-counter"> 5 </div> </div></div></div> </div> First I wanted to remove the numbers. Below code removed the numbers just fine. .views-content-counter{display: none;} Next, I would like to place the active and inactive sliders on the same row and center but after I write the below css, I still see all the sliders/pagination on the same column aligned left instead. .active .views-field-counter { padding: 1px; margin: 1px; width:20px;height:20px;border-radius:50px;font-size:20px;color:#fff; text-align:center;background:red; } .views-field-counter { padding: 5px; margin: 5px; width:10px;height:10px;border-radius:50px;font-size:20px;color:#fff;line-height:100px;text-align:center;background: #5F9EA0;} To center all the sliders, I wrote below css and did none: .views-slideshow-controls-bottom {margin-left: auto; margin-right: auto;} How can I place them on the same row and then center it? Thanks.

After I add both, it is working now. Thank you so much. I always appreciate your help.

I am trying to make similar to this https://d7.ustravel.org/. Both sites using drupal. I inspected their page but not sure why their site works but not mine.

This time it is not making it full width at all. All the images showing in its original sizes.

Thanks. When I add the code, it does make it full width but then it goes back to original automatically. If you visit my page, you will notice that.

Hi, I created image slideshows. Images are different sizes. I like to make all the images full width of screen and height 550px. If you could visit my page and inspect the slideshows and then help me with the css, it would be helpful. After I inspect the pages in chrome, i see there are so many classes. So, I am confused which one to give you. After inspect my page, I wrote the below css and it did not work. http://chartersdc.com/ .views-slideshow-cycle-main-frame { width: 100%;}.view-slideshowv .views-slideshow-cycle-main-frame-row { min-height: 550px; background-size: cover; min-width: 100%;} Thank you so much.

Never mind. It is working.

Hi, I have the below html. <table class="views-table cols-5 table"> <thead> <tr> <th class="views-field views-field-title"> Title </th> <th class="views-field views-field-field-car-year"> </th> <th class="views-field views-field-field-main-image"> Image </th> <th class="views-field views-field-field-mileage"> </th> <th class="views-field views-field-field-discount-price"> Price </th> </tr> </thead> <tbody> <tr class="odd views-row-first"> <td class="views-field views-field-title title-main-search-view">.. </td> <td class="views-field views-field-field-car-year year-main-search-view "> 2009 </td> <td class="views-field views-field-field-main-image img-main-search-view"> .... </td> <td class="views-field views-field-field-mileage mileage-main-search-view"> 60,253 miles </td> <td class="views-field views-field-field-discount-price specialPrice-main-search-view"> </td> </tr> <tr class="even"> <td class="views-field views-field-title title-main-search-view">... </td> <td class="views-field views-field-field-car-year year-main-search-view "> 2003 </td> <td class="views-field views-field-field-main-image img-main-search-view"> ... </td> <td class="views-field views-field-field-mileage mileage-main-search-view">... 71,674 miles </td> <td class="views-field views-field-field-discount-price specialPrice-main-search-view"> <del> $14,995 </del> <br>$13,900 </td> </tr> <tr class="odd"> <td class="views-field views-field-title title-main-search-view"> ... </td> <td class="views-field views-field-field-car-year year-main-search-view "> 2003 </td> <td class="views-field views-field-field-main-image img-main-search-view"> .. </td> <td class="views-field views-field-field-mileage mileage-main-search-view"> 131,510 miles </td> <td class="views-field views-field-field-discount-price specialPrice-main-search-view"> ... </td> </tr> <tr class="even"> <td class="views-field views-field-title title-main-search-view"> ... </td> <td class="views-field views-field-field-car-year year-main-search-view "> 2007 </td> <td class="views-field views-field-field-main-image img-main-search-view"> </td> <td class="views-field views-field-field-mileage mileage-main-search-view"> 107,021 miles </td> <td class="views-field views-field-field-discount-price specialPrice-main-search-view"> </td> </tr> </tbody></table> I am trying to color the odd and even rows. I have the below css and the color is not changing. .views-table tr{ background: red;}/* Define the background color for all the ODD background rows */.views-table tr:nth-child(odd){ background: #b8d1f3; } /* Define the background color for all the EVEN background rows */.views-table tr:nth-child(even){ background: #dae5f4; } Can you please advise?

This is the class I have. Can I just modify the below codes: .navbar-header .name { float:right; color: white; Font-weight: bold; }

Hello, I have this text " xxx.com | Thank you". How can I apply css to xxx.com only? Thank you.

The code you gave me works for inactive links. I had to write one for active and one for inactive. active: .navbar-default .navbar-nav>.active>a:hover { color: #ffffff; Font-weight: bold; background-color: red; } Inactive: .navbar-default .navbar-nav > li > a:hover { color: #ffffff; Font-weight: bold; background-color: red; } Thank you.