newcoder1010

Previously I only had html then applied css in a css file. Did not work. <h1>This is a Blue Heading</h1> Now, I had to put the style within the template file. It worked. <h1 style="color:blue;">This is a Blue Heading</h1> Thanks.

Hello, I have this html from a pop up window: https://drive.google.com/open?id=1Uk1U1_CaGw-DuoHeLBT8rziXrWgEFEaQseUfc2f4rDg I am trying to color the fonts. I tried the below css. None of them worked. Please advise. #colorbox { color: wheat; } #cboxWrapper .popup p{ color: wheat; } #cboxWrapper body { color: wheat; padding: 20px; } Thanks.

Thank you so much. It worked out perfect. This is the output. https://drive.google.com/open?id=1AjmH_e1qRmcJYTALE-Ch76cuHRmBWGmrKm5vMRR49RQ

HTML: <div class ="col-md-4 service"> <br> <h2> Service title </h2> <p class = "mytext"> Service descriptionn test test test test test test test test test test test test test test test test test test te test test test test test test test test test test test test test test test test test test test test test test test test test test test test st test </p> </div> CSS: .service { border: 1px solid red; position: relative; } .service::after { background: rgba(0, 0, 0, 0) url(https://www.w3schools.com/html/html5.gif) no-repeat scroll center center / 100px auto; content: ""; height: 50px; left: 50%; margin-left: -50px; margin-top: -100px; position: absolute; width: 100px; } If I give padding to .services class, image relocates to inside the services class. Also, image relocates as I am adding the texts to p class "mytext". Definitely I made progress but I am confused how to place the image in the same place regardless of padding to services class or length of texts in mytext class. Please advise.

Sounds complicated. I will let you know. Thanks.

Hello, I would like to place a border with an image around an element similar to this one. Please advise or refer me to some resources. So I can try it out. https://drive.google.com/open?id=0B7xIEuVi005yX29uNC1hMDhmZU0 Thanks.

I applied line height only to desktop version. For other devices, it will be two lines. Thank you.

Hello, I have h1 tag. I would like to place it in center and then vertical align to middle. I was able to place it in center but I am not able to place it vertically in the middle. This is the css I have. I used padding top as workaround which works somewhat. I also placed vertical-align to middle but it did not do anything. Please advise. .node-type-properties h1 { display: block; /* background: blue; */ background-image: url(/rincon/sites/default/files/bg-blue.png); height: 200px; background-repeat: no-repeat; width: 100%; text-align: center; /* vertical-align: middle; */ padding-top: 7%; font-size: 55px; color: white; }

I updated my google doc if that helps. Removed the top region. Still same issue. .row.topregion { display: none; background: #2f2d2d; }

Hello, When I visit the my site in mobile phone, I am not sure why it is forcing me to scroll right. Everything should fit into mobile screen size. I thought callus block creating the issue. I display:none; to the callus block and I still have issue. I have gone thru every row to see if I have hard code width by mistake and I did not see it. I am just confused. Please advise. https://drive.google.com/open?id=1IZFTADisQPmG3bFqEtpnRJzBS6KUHHI9VmEtkK3TG3w

Yes using drupal. I added this code. Two places. One is main logo link on the top bar. Still have issue. The other one is on the sidebar. That works fine. I am not sure why. <a class="logo" href="/" title="psarl"> <img src="/assets/images/logo2g-245x128-6.png" alt="psarl" /> </a> My page

Hello, I have this php code. I can only click part of the image not the entire image. Am I writing it in correct format? <a class="logo" href="/" title="<?php print t('Home'); ?>"> <img src="<?php $logo1 = "images/logo2g-245x128-6.png"; print $logo1; ?>" alt="<?php print t('Home'); ?>" /> </a> Please advise.

z-index:1030; Worked. Thanks much.

Hello, .callus {position:fixed;} When I scroll down, other contents are on top of this "callus" block. How can I force this block "callus" to be on top layer? So when I scroll down, this block stays on top layer. I tried with z-index:auto/initial/inherit; None worked. .callus {position:fixed;z-index: auto|number|initial|inherit;} Thanks.

Hello, I have a table. In the table, there are some rows I do not want to display. How can I hide it using CSS? These are the two rows I would like to remove. <tr> <td> <div class="form-item form-item-accounts-1 form-type-checkbox checkbox"> <label class="control-label" for="edit-accounts-1"> <span class="element-invisible"></span> <input type="checkbox" id="edit-accounts-1" name="accounts[1]" value="1" class="form-checkbox"></label> </div></td> <td> <a href="/rincon/user/1" title="View user profile." class="username" xml:lang="" about="/rincon/user/1" typeof="sioc:UserAccount" property="foaf:name" datatype="">kar2015</a></td><td>active</td> <td><ul> <li>administrator</li> </ul></td> <td>4 months 1 week</td><td>1 min 15 sec ago</td><td><a href="/rincon/user/1/edit?destination=admin/people">edit</a></td> </tr> <tr> <td> <div class="form-item form-item-accounts-454 form-type-checkbox checkbox"> <label class="control-label" for="edit-accounts-454"> <span class="element-invisible"></span><input type="checkbox" id="edit-accounts-454" name="accounts[454]" value="454" class="form-checkbox"></label> </div></td> <td><a href="/rincon/users/admin" title="View user profile." class="username" xml:lang="" about="/rincon/users/admin" typeof="sioc:UserAccount" property="foaf:name" datatype="">admin</a></td><td>active</td><td><ul> <li>administrator</li> </ul></td> <td>3 weeks 23 hours</td><td>56 min 45 sec ago</td><td><a href="/rincon/user/454/edit?destination=admin/people">edit</a></td> </tr>

I created 5 images using Paint. All images have same dimension: Width:1750px. Height:750px. I can see the images in desktop just fine. As I am making the screen smaller, I see that height is getting smaller and smaller. Once I get to mobile screen sizes, height becomes around 350px for images. I did not give this height. Images dont look as good as desktop sizes. Yes, I can create 3 separate blocks. One for desktop, one for laptop, one for mobile. Each will have separate image dimension. This route requires a lot of work. Ideal solution would be to use one block responsive for all devices. Again, images are responsive but dont look as good as desktop. When I inspect, I see this css: .img-responsive, .thumbnail > img, .thumbnail a > img, .carousel-inner > .item > img, .carousel-inner > .item > a > img { display: block; max-width: 100%; height: auto; } I can simply change the height to desired height for mobile and tablet but it does not look good. I thought it would be helpful if I could display proportionally like truncate 10% around the images. I am just lost. Thanks.

Hello, I have social media facebook api block. It has 4 div classes. I needed to place them in the center (mobile version). I was able to do it. Next, I would like to apply same width and height and border:1px to all divs but I could not do it. I would be able to do it if I could change the div classes in tpl file. But I could not because it is controlled by facebook. I think. I spent entire week. I wrote so many css but I simply failed. It is mainly because of the default css and div classes. If you please visit my page and see if you can help me fixing the issue, it would help me whole lot. Block class is sma. My site. https://drive.google.com/open?id=1bzKSVe6R8bBPDuZ1qHx7nPlU_vvb5bIosOw31KenWXM Thanks much.

I made a note. I will try it. Thanks much.

Never mind. It worked. I had another css floating to right which is overriding my code. Thanks.

Hello, HTML: <section id="block-widgets-s-socialmedia-profile-default" class="smp"> <div id="widgets-element-socialmedia_profile-default" class="widgets"> <div id="widgets-element-socialmedia_socialmedia-twitter-profile-button" class="widgets widgets-element"> <a href="http://twitter.com/xx" title="Visit xx on Twitter" target="_blank"> <img src="/rincon/sites/all/modules/socialmedia/icons/levelten/glossy/48x48/twitter.png" alt="Twitter icon"></a></div> <div id="widgets-element-socialmedia_socialmedia-facebook-profile-button" class="widgets widgets-element"> <a href="http://www.facebook.com/yy" title="Visit yy on Facebook" target="_blank"> <img src="/rincon/sites/all/modules/socialmedia/icons/levelten/glossy/48x48/facebook.png" alt="Facebook icon"></a> </div> <div id="widgets-element-socialmedia_socialmedia-rss-feed-button" class="widgets widgets-element"> <a href="/rincon/rss.xml" title="Subscribe to via RSS" target="_blank"> <img src="/rincon/sites/all/modules/socialmedia/icons/levelten/glossy/48x48/rss.png" alt="RSS icon"></a> </div> <div class="widgets-clear"></div></div> </section> CSS: .smp {text-align:center;} .widgets{text-align:center;} .widgets-element{display:inline-block;} I tried to place the above images center of the block. It did not work. Images are floated left by default. I would like to place them in the center. Please advise. Thanks.

Thank you but I could not make it work the way I wanted. At least I made progress. I was able to put the arrow somewhat center but not 100%. I did try to apply what you recommended but I am confused how to follow your suggestion. I would ask you if you could visit my page and view the slideshow. Some default css also making it confusing. Two issues: How to put the circle center of the image height? I used margin-top:20% as shown below (css1) as workaround. It is not fully centered of the image height. How to put the arrow in the center of the circle? I was able to do somewhat using below css2. CSS1: .carousel-control.right { height: 60px; width: 60px; border-radius: 60px; color: white; margin: 10px; background: #757376; margin-top: 20%; } CSS2 .carousel-control .icon-next, .carousel-control .icon-prev { font-size: 80px; margin-right: -15px; margin-top: -50px; } I spent last 3 hours for the above workaround. It would be helpful if you could provide me the ideal solution. Thanks.

Hello, HTML: <ul class="SocialMediaMenu list-inline"><li class="fb first leaf"> <a href="https://www.facebook.com/p" title="facebook" target="_blank">f</a></li> <li class="tw last leaf"><a href="https://twitter.com/P" title="twitter" target="_blank">t</a></li> </ul> I have this css to replace the a link by an image. Color is transparent. After I have the background image, I dont see the list items. They just disappear. .SocialMediaMenu a { display: block; height: 40px; line-height: 40px; width: 40px; border-radius: 30px; color: transparent; text-align: center; /* font-size: 2em; */ float: left; border: 0; margin: 10px; background-image: url("/DAVIS%20LOGO_0.png"); } Please advise.

Thank you so much. I have some issue with HTML access. CSS is work around for now. Thank you again.

Hello, HTML: <ul class="responsive-menus-simple" id="rm-no-id-main"> <li><a href="#" data-toggle="modal" data-target="#login-modal">Login</a></li> <li><a href="#" data-toggle="modal" data-target="#register-modal">Register</a></li> </ul> I would like to remove the register link. I cant do it from html. How to apply display:none; to the 2nd item (register)? Thank you.

I have another block I need to apply css to make it circle. I was able to make it circle and I was able to place the arrow inside the circle/centered. However, when I change the size of the arrow to 60px from 30px, arrow no longer in the center of circle. I did try to inspect in chrome and played around and not able to fix it. Please advise. https://drive.google.com/open?id=1tPvkCpM25Y0_MhNU4Bhh_b97xU7TC9UebcAB9skY9yY link .carousel-control.right { height: 60px; width: 60px; border-radius: 60px; color: white; margin: 10px; background: #757376; } .icon-next { width: 60px; // was 30. changed to 60 height: 60px; // was 30. changed to 60 margin-top: -15px; font-size: 60px; // was 30. changed to 60 }