newcoder1010

Musicman - "But I suggest to have an individual arrow image in png and then use the CSS content property." Not understanding. I dont know how i can take my regular image and then make it arrow. First I created html block: <img alt="dog" src="http://godrupal.info/shalomhomesolutions/sites/default/files/xpress-auto-care-car-sales.png" /> // THIS IS JUST REGULAR SIZE IMG. <svg height="0" width="0"> <defs> <clipPath id="svgTextPath"> <polygon points="0,50 100,0 100,100" style="fill:none; stroke:purple; stroke-width:1" /> </clipPath> </defs> </svg> CSS: #block-block-35 img { clip-path: url( #svgTextPath ); } It did not work. Things are getting more complicated. If you could help, it will be great.

I did not know what i was doing. So I though I should apply css to image to make arrow. This is new to me. I am doing arrow-left first. This code is from css tricks. .arrow-left { width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-right:10px solid blue; } Now, I am trying to apply css to the form in the middle. I just applied css to the form: I took the above arrow left code and placed inside the block located between two images: #block-webform-client-block-53 { /* padding-top: 77px; */ background: #EAE7E7; z-index: 1; padding-right: 145px; /* width: 200px; */ /* height: 0; */ border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 100px solid #F0F0F1; } I am lost. Could please help me placing this two arrows both sides of the form? I am just eager to fix it.

musicman - I dont know how to make arrow image. my goal is to make the arrow image. Dsonesuk - I was able to follow rotate part. I am lost after that. Sorry. Please advise. My Page: http://godrupal.info/shalomhomesolutions/?q=node/112 Please scroll to bottom. You will see i have form then each side i have one image. Please see the design how i want to make the region. http://godrupal.info/shalomhomesolutions/sites/default/files/Untitled_3.png Form css which stays in the middle. Should i put this form on top of two images and apply css to make arrow on this form instead of images? #block-webform-client-block-53 { padding-top: 77px; background:white; z-index:1; } .region-footer2 img { width:100%; height: 550px; background-color: red; /* Rotate div */ -ms-transform: rotate(27deg); /* IE 9 */ -webkit-transform: rotate(27deg); /* Chrome, Safari, Opera */ transform: rotate(27deg); } Thanks.

Thanks but sorry I am not able to follow it. Html: <div class="region region-footer"> <section id="block-block-15"> <p><a href="http://www.teksolusion.com/" target="_blank"> <img src="sites/default/files/tek%20solusion%20logo.png" alt="teksolusion.com"><br></a> </p> </section> </div> What would be the css for the image I have? Below did not work. .region-footer img:before { content: url("sites/default/files/tek%20solusion%20logo.png"); } Please help.

Hi, I like to pick any image and then make it like an arrow with white background. I tried paint, snagit, snipping tool. I could not do it. If please help. Should I use tool or I can do it using css. Many thanks.

I am lost from your message. I just could not follow what you are trying to say. sorry. I tried this in google chrome by just inspecting and it is doing better but pagination is still outside the slideshows. http://godrupal.info/shalomhomesolutions/sites/default/files/Untitled.png .view-slideshowv .views-slideshow-controls-bottom { position: relative; /* right: 0px; */ /* font-size: 16px; */ background-color: #232020; /* opacity: 0.5; */ width: 100%; z-index: 1030; height: 51px; /* bottom: 80px; */ /* top: 388px; */ /* margin-bottom: 2px; */ margin-top: 0px; }

Hi, I created slideshows. Then I like to place the pagination on the bottom of the slideshow. I am not sure why below code puts the pagination outside the slideshows. pagination should have same width as image. Can you please help? http://godrupal.info/shalomhomesolutions/?q=node/112 .view-slideshowv .views-slideshow-controls-bottom { position: absolute; right: 0px; background-color: #232020; opacity: 0.5; width: 100%; z-index: 1030; height: 51px; bottom: 0px; } Thanks.

Hi, I have a menu. I have a image slideshow. I like to place the menu on top of the slideshow. How can I do it? Menu: <section id="block-system-main-menu" class="block block-system col-sm-12 col-md-7 col-lg-7 hidden-xs hidden-sm contextual-links-region block-menu clearfix"> <ul class="menu nav"><li class="first leaf active-trail active"><a href="/shalomhomesolutions/?q=xpress-vehicles-inventory-in-atlantic-city-nj" class="active-trail active">Home</a></li> <li class="leaf"><a href="...">Inventory</a></li> <li class="leaf"><a href="...">Car Finder</a></li> <li class="leaf"><a href="...">Services</a></li> <li class="last leaf"><a href="...">Trade-in Value</a></li> </ul> </section> Slideshow: <div class="view-slideshowv"> <div id="views_slideshow_cycle_div_slideshowv-block_1" class="views-slideshow-cycle-main-frame-row views_slideshow_cycle_slide views_slideshow_slide views-row-2 views_slideshow_cycle_hidden views-row-even" style="position: absolute; top: 0px; left: 1303px; display: none; z-index: 5; opacity: 1; width: 1303px; height: 400px;"> <div class="views-slideshow-cycle-main-frame-row-item views-row views-row-1 views-row-even sm-12"> <div class="views-field views-field-field-img"> <div class="field-content"><img typeof="foaf:Image" class="img-responsive" src="http://godrupal.info/shalomhomesolutions/sites/default/files/Untitled_2.png" width="1140" height="450" alt=""></div> </div></div> </div> <div id="views_slideshow_cycle_div_slideshowv-block_2" class="views-slideshow-cycle-main-frame-row views_slideshow_cycle_slide views_slideshow_slide views-row-3 views_slideshow_cycle_hidden views-row-odd" style="position: absolute; top: 0px; left: 1303px; display: none; z-index: 5; opacity: 1; width: 1303px; height: 400px;"> <div class="views-slideshow-cycle-main-frame-row-item views-row views-row-2 views-row-odd sm-12"> <div class="views-field views-field-field-img"> <div class="field-content"><img typeof="foaf:Image" class="img-responsive" src="http://godrupal.info/shalomhomesolutions/sites/default/files/xpress-auto-sales-buy-car.png" width="1140" height="450" alt=""></div> </div></div> </div> </div> ...................................... </div> css: .view-slideshowv #block-system-main-menu { ???? } Can you please help?

Thanks. It worked.

Hi, HTML: <ul class="pagination"> <li class="pager-first"><a href="/shalomhomesolutions/?q=xpress-vehicles-inventory-in-atlantic-city-nj"></a></li> <li class="prev"><a title="Go to previous page" href="/shalomhomesolutions/?q=xpress-vehicles-inventory-in-atlantic-city-nj">‹ previous</a></li> <li><a title="Go to page 1" href="/shalomhomesolutions/?q=xpress-vehicles-inventory-in-atlantic-city-nj">1</a></li> <li class="active"><span>2</span></li> <li><a title="Go to page 3" href="/shalomhomesolutions/?q=xpress-vehicles-inventory-in-atlantic-city-nj&page=2">3</a></li> <li><a title="Go to page 4" href="/shalomhomesolutions/?q=xpress-vehicles-inventory-in-atlantic-city-nj&page=3">4</a></li> <li><a title="Go to page 5" href="/shalomhomesolutions/?q=xpress-vehicles-inventory-in-atlantic-city-nj&page=4">5</a></li> <li class="next"><a title="Go to next page" href="/shalomhomesolutions/?q=xpress-vehicles-inventory-in-atlantic-city-nj&page=2">next ›</a></li> <li class="pager-last"><a href="/shalomhomesolutions/?q=xpress-vehicles-inventory-in-atlantic-city-nj&page=4"></a></li> </ul> I like to remove all the numbers. I only like to keep li class prev and next. How can I remove all li classes except prev and next? Thanks.

Hi, I created a views. It displays 2 images at a time. When I click next, it shows the next 2 images. When I click prev, it shows last 2 images. Problem: When it shows next 2 images, cursor goes all the way to the top of page. I like to stay within the region. How can I stay within the region as I click next or previous? My page: http://godrupal.info/shalomhomesolutions/?q=browse-vehicles Can I write some css to next and prev link so i am always at the region where the views is on the page? Many thanks.

Thank you so much.

Thanks.

This is my page. If you could inspect in chrome and help me with the css, please. http://godrupal.info/xpressauto/?q=node/16 Background concept I thought is easy. I applied many times. This time I am just not getting it.

Hi, html: < body role = "document" class="html not-front logged-in no-sidebars page-node page-node- page-node-16 node-type-webform toolbar toolbar-drawer"> ............ <div class = "Very-Top2"> ... </div> ............ </body> CSS: .Very-Top2 { margin-top: 115px; right: 0;left:0;background-color:white; } .html {background:red;} When I go to my page, I expected page to be with red background and very-top2 class should be white background. But I only see red background. How can I have white background for the very-top2 region? Thanks.

This is the css I applied: .webform-component-checkboxes {display: inline-block;} .webform-component-checkboxes .form-item {width:30%; float:left;} I fixed it but I have a question. I am not sure why first column- second row always empty of all the lists. If you could visit my page and help.

Never mind. I fixed it.

Hi, When I go to my page, I see the list of checkboxes display on a single column. Instead, I like to place them on a row. I like to put 3 items on a each row. As many row needed. How can I place them on a row? I have this code: <div id="edit-submitted-options-body" class="form-checkboxes"> <div class="form-item form-item-submitted-options-body-2-door form-type-checkbox checkbox"> <label class="control-label" for="edit-submitted-options-body-1"> <input type="checkbox" id="edit-submitted-options-body-1" name="submitted[options][body][2 Door ]" value="2 Door " class="form-checkbox"> 2 Door </label> </div> <div class="form-item form-item-submitted-options-body-extended-cab form-type-checkbox checkbox"> <label class="control-label" for="edit-submitted-options-body-2"><input type="checkbox" id="edit-submitted-options-body-2" name="submitted[options][body][Extended Cab ]" value="Extended Cab " class="form-checkbox"> Extended Cab </label> </div> <div class="form-item form-item-submitted-options-body-3-door form-type-checkbox checkbox"> <label class="control-label" for="edit-submitted-options-body-3"><input type="checkbox" id="edit-submitted-options-body-3" name="submitted[options][body][3 Door ]" value="3 Door " class="form-checkbox"> 3 Door </label> </div> ........ </div> If you would like to see my page, http://godrupal.info/xpressauto/?q=node/99. Please scroll to options section. I like to place all check boxes on a row basis. If I can do one, I hope I can do rest. Please advise. Thanks.

Hi, I have some images with colored background. Is there way I can make these images with white background? Thanks.

Hi, @media only screen and (max-width: 768px){ .views-field-field-main-image img {width:100%; height:200px;} } @media (min-width: 768px) and (max-width: 992px){ .views-field-field-main-image img {width:100% !important; height:200px;} } When you go to above http://godrupal.info/xpressauto, I like to see the images under vehicles inventory to be 100% width. It works on chrome but not on IE. If you could help please. Thanks.

Hi, I have done this several times. Now, I am having issue. 1. If you could please visit my dev site, you first make it to less than 768px for mobile version. http://godrupal.info/xpressauto 2. Slideshow images should be 100% width and it is not doing it. I applied the below css: .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; } .views-slideshow-cycle-main-frame-row-item .field-content img { height: 200px !important; min-height: 200px; width: 100%; } Can you please inspect in chrome and help me with the css why images are not 100% width of the screen when viewing in less than 768px screen? Many thanks in advance.

I guess I made some mistake. It is working now. Thanks.

Sorry, I am not understanding what you say.

Hi, html: <section id="block-menu-menu-jn" class="block block-menu col-sm-12 col-md-5 contextual-links-region clearfix"> <ul class="menu nav"> <li class="first leaf"><a href="https://www.facebook.com/xpressautosale" title="">F</a></li> <li class="leaf"><a href="https://twitter.com/XpressAutoSale1" title="">T</a></li> <li class="leaf"><a href="https://plus.google.com/+XpressAutoShopAtlanticCity/posts" title="">g</a></li> <li class="last leaf"><a href="http://youtube.com/channel/UC7_GywWhwjF--TK7XWXJjhA" title="">y</a></li> </ul> </section> css: working for first n last. #block-multiblock-2 a { color: transparent;} #block-multiblock-2 .first { background-image: url("facebook.png"); background-size: 30px 25px; background-repeat: no-repeat;} #block-multiblock-2 .last { background-image: url("facebook.png"); background-size: 30px 25px; background-repeat: no-repeat;} How to apply css to 2nd and third links. Below did not work. Can you help? #block-multiblock-2 ul.menu.nav li:nth-of-type(2) { background-image: url("tw.png"); background-size: 30px 25px; background-repeat: no-repeat;} #block-multiblock-2 ul.menu.nav li:nth-of-type(3) { background-image: url("yt.png"); background-size: 30px 25px; background-repeat: no-repeat;} Thanks.

I like the second option better. Thank you.