newcoder1010

Thank you.

I was able to made progress with your recommendation. However, the texts are not being centered in the circle. If you please take a look, help me with the css. Thanks. https://drive.google.com/open?id=1tPvkCpM25Y0_MhNU4Bhh_b97xU7TC9UebcAB9skY9yY .SocialMediaMenu a { display: block; height: 40px; width: 40px; border-radius: 30px; color: white; text-align: center; font-size: 2em; float: left; border: 0; margin: 10px; }

I will have to research and need to play around for that. I will let you know. For now, can you please help me with some css at least to make it somewhat better (mainly the first image)?

First of all I would like to thank you for helping me. Second, i dont even know exactly what I am trying to do. I have slideshow on this page. First image i got it from online and image does not look right. So, I have been playing around to make all images look better but I failed to do so. So, at this point I would ask for your recommendation. My page.

I have another image field. I tried to apply the similar css like you did above but it is not doing anything. I think it would be better if I could take middle section of the original image. So if the original image height is 500px I would like to keep from 50px to 400px that means top 100px and bottom 50px wont display. Please advise. <div class="views-field views-field-field-img"> <div class="field-content"><img typeof="foaf:Image" class="img-responsive" src="mountain.jpg" width="1350" height="550" alt=""></div> </div> CSS .img-responsive { display: block; height: auto; /* max-width: 100%; */ width: 100%; /* background-repeat: no-repeat; */ background-size: cover; background-position: 0 100%; }

I thought css applies the transparency. I was able to use GIMP and created a transparent image. Thank you.

I simply created the image of blue arrow with white background. After that no transparent applied to the image. This is my site trying to hide the white background and just display the arrow. Image address . If you visit this page Example site. and then right click the logo image on top left corner > select "open image in new tab", you will notice that original image has white background but white background does not show in the main page.

Hi, html: <div class="div2"> <h3>Get A GUARANTEED Fair All Cash Offer</h3> <p >Let us make a fair all-cash offer on your house.</p> <p><img class="img1" title="Arrow Right" src="cornflowerblue.png">No hassles.&nbsp;No obligation.</p> <h3>Just Complete This Quick Form!</h3> </div> CSS: .div2 { color: #ededf1; background: #35302b; opacity: .8; } img { margin: 5px 0 15px 15px; float: right; background-position: initial; // did not work background-image: none; // did not work background-color: none; // did not work } Img has white background with blue color arrow. I only like to display blue arrow. Please advise.

Hello, I have this html: <h3> Just complete this quick form </h3> CSS: h3{ width: 0; height: 0; border-top: 60px solid transparent; border-bottom: 60px solid transparent; border-left: 60px solid green;} It only put arrow right of the h3 tag. How can I have an arrow with background color like this image? https://drive.google.com/open?id=0B7xIEuVi005yU2gxaTUwNHNNdVE Thank you.

Hi, I have this html. <ul class="SocialMediaMenu list-inline"><li class="first leaf"><a href="https://www.facebook.com" title="facebook" target="_blank">f</a></li> <li class="last leaf"><a href="https://twitter.com" title="twitter" target="_blank">t</a></li> </ul> .SocialMediaMenu li { display: block; height: 40px; width: 40px; -moz-border-radius: 30px; border-radius: 30px; color: white; text-align: center; font-size: 2em; float: left; border: 0; margin: 10px; } I can click if I hover over the letters (f, t). Some users may not be able to tell because I have background color on li elements. I was thinking to make the entire li elements hyperlinked. I am not sure how I should solve it or just leave it as is. Please advise.

Thank you. Photoshop is a paid software. Is there any open source photo editing program do you recommend?

Hi, I have an image. I can apply as img {opacity:.4;} That applies to the entire image. Instead, I would like to apply opacity similar to the image. I am not sure how to do. Please advise. https://drive.google.com/open?id=0B7xIEuVi005ydkxWdnRsLURmLW8

So far, I tried the first solution. It worked like a magic. I also made a note of the 2nd solution. Thank you much.

Hello, I have this html: <section id="block-system-main-menu" class="block block-system mainmenu"> <h2 class="block-title">Main Menu</h2> <ul class="menu nav"><li class="first leaf"><a href="/timore-md">Home</a></li> <li class="leaf"><a href="we-buy-houses">Houses</a></li> <li class="leaf"><a href="/blog">Blog</a></li> <li class="last leaf"><a href="/faq-page">FAQ</a></li> </ul> </section> mainmenu class takes the entire row. I would like to place the center in the center of mainmenu class. I used this css: .menu { width: 70%; margin-left: auto; margin-right: auto; } Now, menu class is being centered but menu items are floating to left within menu class. I dont see an option to float menu items to center. I would simply like to place the menu items in the center of the row. Please advise.

Yes, it does highlight the city. In addition, I am trying to have a background color to the city.

Hello, I have a google map field. I would like to highlight the city (eg. background: gray;) of the map. I inspected the page in chrome and tried but could not figure it out. If you could help, it would be great. Image My page link. HTML: <div class="entity entity-field-collection-item field-collection-item-field-mapwcaption clearfix" about="/field-collection/field-mapwcaption/3" typeof=""> <div class="content"> <div class="field field-name-field-map1 field-type-text field-label-hidden"> <div class="field-items"><div class="field-item even"> <iframe width="200" height="200" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?hl=en&q=Baltimore%2C+MD&z=14&t=m&output=embed"></iframe> </div> </div> </div> <div class="field field-name-field-map-caption field-type-text field-label-hidden"><div class="field-items"><div class="field-item even">We Buy House MD</div></div></div> </div> </div>

You just read my mind. I came to post it. You already did. I will choose mini pager option if I want to hide numbers. Thanks. <ul class="pager"><li class="pager-previous"><a href="/content/we-buy-houses-kings-ny">‹ </a></li> <li class="pager-current">2 of 4</li> <li class="pager-next"><a href="/content/we-buy-houses-kings-ny?page=2"> ›</a></li> </ul>

I did change to mini pager option. Now, I see the numbers like this 1 of 4 > Numbers are still displaying but in different format.

VIews does not option to hide the numbers. What pagination option are you referring and recommending? As for css, I will take the first option you provided. Thank you much. Another question but not required. Currently, when I am on page 1, I see next class only. I see prev class when I am on page 2, 3,4. Is there way I can also display prev class when i am on page 1 as well. Prev class should point to page 4. If Prev class link is disabled on page 1, that will be fine too. Again, it is not required. I thought it would better to have prev and next on all pages.

I use drupal. I create content type "testimonials". Add each content to the content type "testimonials". So each content is becoming one link.

Hello, I have this html when I am on page 1: <ul class="pagination"><li class="active"><span>1</span></li> <li><a title="Go to page 2" href="/content/we-buy-houses-baltimore-md?page=1">2</a></li> <li><a title="Go to page 3" href="/content/we-buy-houses-baltimore-md?page=2">3</a></li> <li><a title="Go to page 4" href="/content/we-buy-houses-baltimore-md?page=3">4</a></li> <li class="next"><a href="/content/we-buy-houses-baltimore-md?page=1"> ›</a></li> <li class="pager-last"><a href="/content/we-buy-houses-baltimore-md?page=3"></a></li> </ul> When I am on page 2, I see this html: <ul class="pagination"><li class="pager-first"><a href="/content/we-buy-houses-baltimore-md"></a></li> <li class="prev"><a href="/content/we-buy-houses-baltimore-md">‹ </a></li> <li><a title="Go to page 1" href="/content/we-buy-houses-baltimore-md">1</a></li> <li class="active"><span>2</span></li> <li><a title="Go to page 3" href="/content/we-buy-houses-baltimore-md?page=2">3</a></li> <li><a title="Go to page 4" href="/content/we-buy-houses-baltimore-md?page=3">4</a></li> <li class="next"><a href="/content/we-buy-houses-baltimore-md?page=2"> ›</a></li> <li class="pager-last"><a href="/content/we-buy-houses-baltimore-md?page=3"></a></li> </ul> Unfortunately, I do not have the option to hide the numbers in template file at this point. Instead, I would like to hide only the numbers using css. Please advise how to hide the numbers from the pagination class. Thank you in advance.

Looks very nice with cover and background-position: 0 100%; Thank you so much for your help.

I changed to cover. It looks better. Thank you. Now I mainly see the trees. House is truncated. I saw other options from the link you gave me. I am not sure how I can include the house and then truncate trees? Please advise.

Hello, I have a background image under the class buyer_form. On top of the image, I have two blocks. Would that be possible if you visit my page and provide me some styling recommendation of the background image? Currently, I am displaying the entire image. I feel that Image can be improved by applying some styling. I am trying to improve the styling by keeping the same dimension. Simply asking for recommendation and css code to improve it. Thanks.

Thanks. It worked.