Jump to content


  • Content count

  • Joined

  • Last visited

Community Reputation

3 Neutral

About newcoder1010

  • Rank

Recent Profile Visitors

16,305 profile views
  1. How to style webform date picker?

    Hello, HTML: <div class="webform-container-inline webform-datepicker"> <div class="form-item form-item-submitted-personal-information-birth-date-month form-type-select form-group"> <select class="month form-control form-select" required="required" id="edit-submitted-personal-information-birth-date-month" name="submitted[personal_information][birth_date][month]"> <option value="" selected="selected">Month</option> <option value="1">Jan</option> <option value="2">Feb</option> </option> </select> <label class="control-label element-invisible" for="edit-submitted-personal-information-birth-date-month">Month</label> </div> <div class="form-item form-item-submitted-personal-information-birth-date-day form-type-select form-group"> <select class="day form-control form-select" required="required" id="edit-submitted-personal-information-birth-date-day" name="submitted[personal_information][birth_date][day]"> <option value="" selected="selected">Day</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <label class="control-label element-invisible" for="edit-submitted-personal-information-birth-date-day">Day</label> </div> <div class="form-item form-item-submitted-personal-information-birth-date-year form-type-select form-group"> <select class="year form-control form-select" required="required" id="edit-submitted-personal-information-birth-date-year" name="submitted[personal_information][birth_date][year]"> <option value="" selected="selected">Year</option> <option value="1888">1888</option><option value="1889">1889</option><option value="1890">1890</option><option value="1891">1891</option> <option value="1892">1892</option><option value="1893">1893</option><option value="1894">1894</option><option value="1895">1895</option><option value="1896">1896</option><option value="1897">1897</option> </select> <label class="control-label element-invisible" for="edit-submitted-personal-information-birth-date-year">Year</label> </div> </div> Now Month, Day, Year display in a column. How can I display month, day and year in the same row? I tried this and I still see them in a column. select#edit-submitted-personal-information-birth-date-year { width: 33%; float: left; } select#edit-submitted-personal-information-birth-date-day { width: 33%; float: left; } select#edit-submitted-personal-information-birth-date-month { width: 33%; float: left; } Please advise.
  2. How to style slides in slideshow

    I tried so many codes. I made some progress. I applied css to delay the caption. Now I have 400px height to parent. How can I say display only middle portion of the images by cropping 15% top and bottom in all devices without leaving any padding in the parent element? Its ok if people head is cropped. My goal is to learn. After that I can play with that. .page-node-73 .container .carousel-inner { position: relative; width: 100%; overflow: hidden; height: 400px; } I am not able to give background image in html. Only option I have is to use css. This is the page where I am practicing incase if you like to see. Thanks.
  3. How to apply hover, focus, active selector for all links

    Thanks. I will use both options depending on site.
  4. Hi, When I inspect my page in chrome, I see the links shows in different formats. Below are some examples: .nav > li > a .dropdown-menu > .active > a .nav .open > a Regardless how the a links show, I like to apply css to all links. Below css is not working for all the links. My site is a bootstrap theme. Some css is being applied from bootstrap CDN and not reading my css unless I delete bootstrap css. a:link { color: blue; } /* mouse over link */ a:hover { color: red; } /* selected link */ a:active { color: yellow; } a:focus { color: green; } How can I apply css by forcing as : - All links blue color - All links on hover red. - All links on click green - All links when we are on the page color(active page) are yellow. Thank you.
  5. How to make responsive video iframe

    This one worked for me. .player { position: relative; padding-bottom: 35%; padding-top: 35px; height: 0; overflow: hidden; } .player iframe.utube { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } For mobile, I changed the padding bottom to 55% and for tablet to 45%. Questions: I did not understand the meaning of padding bottom and padding top. What is 16:9 ratio? How do you know the ratio? 16 and 9 are width and height? Thank you.
  6. How to make responsive video iframe

    1. .player { width: 70%; HEIGHT: 0; POSITION: ABSOLUTE; overflow: hidden; padding-bottom: 56.25%; } 2 iframe { /* width: 70%; */ /* height: 100%; */ position: absolute; top: 0; right: 0; left: 0; border: 0; } 3 html looks still same as before. 4. How page looks now. https://drive.google.com/open?id=1O_9oIX2pzk872zkBczEbY4B1RqRTf3zX Its overlapping on another field. If you visit the link, you will notice you tube field is overlapping body field. Also iframe not responsive. Cover page that I am referring to as "when you visit a page you see a video with video cover. cover may show one person and texts. As I am making responsive I want video and video cover to be responsive. Not just the video itself. That means I should see the video cover of person and texts regardless of the screen size. https://drive.google.com/open?id=1l6b1Dglkc5pDVZjOKRycO83OujYBCnqt Thanks.
  7. How to make responsive video iframe

    Hello, I would like to place the video 70% width of the screen and height should be adjusted by itself based on the screen size. HTML: <div class="field field-name-field-youtube field-type-video-embed-field field-label-above"> <div class="field-label">Youtube 1: </div> <div class="field-items"> <div class="field-item even"> <div class="embedded-video"> <div class="player"> <iframe class="utube" src="//www.youtube.com/embed/fPWzv" frameborder="0" allowfullscreen="" width="700" height="700"></iframe> </div> </div> </div> </div> </div> CSS: iframe.utube { width: 100%; } Now it is taking entire computer screen. I changed from 100% to 70%. Desktop shows the entire video. But as I am making responsive, video is being responsive but cover page starts cropping. That means video shows 70% and cover page shows part of the cover page. How can I make it 70% width by a responsive height (please recommend) without cropping the cover page content? Thanks.
  8. How to write if else

    Thank you. Above code what I needed.
  9. How to place arrow to slideshow next and prev buttons

    Never mind. I removed some code and now it is working. Thanks.
  10. Hello, I created a slideshow in carousel and I had white color arrows of prev and next buttons. I applied some css animation and now the arrows are gone. Instead, I see white color square. Below is the css: .carousel-control.left { left: 22px; opacity: 1; } css_injector_4.css?p4k674:194 .carousel-control.left, .carousel-control.right { position: absolute; z-index: 100; top: 50%; margin-top: -30px; opacity: 0; color: #fff; font-size: 0px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; text-shadow: none; width: 30px; height: 30px; } css_injector_4.css?p4k674:183 .carousel-control.left { left: -22px; } bootstrap.css? [sm]:6306 .carousel-control.left { background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .0001) 100%); background-image: -o-linear-gradient(left, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .0001) 100%); background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, .0001))); background-image: linear-gradient(to right, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .0001) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1); background-repeat: repeat-x; } opacity.less:7 .carousel-control { position: absolute; top: 0; bottom: 0; left: 0; width: 15%; font-size: 20px; color: #fff; text-align: center; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); background-color: rgba(0, 0, 0, 0); filter: alpha(opacity=50); opacity: .5; } Image to see the page in chrome inspect: https://drive.google.com/open?id=1U0G2BXb1kDOvQIM-x_Zk67VLY-CXyebO Please advise.
  11. How to write if else

    Hello, My script reads some data from excel cell. Sometimes excel cell has empty but variable returns 0. I am not sure why. Use case: - read data from excel cell. - If cell is empty, null, or 0, then assign "baddata" value to variable "Cellvalue" - If cellvalue NOT EQUAL TO "baddata" then print "good data" String zip2Value; String cellvalue; if (zip2Col == null) OR (zip2Col == 0) { cellvalue = "baddata";} } if (cellvalue != "baddata") { System.out.println("good data "); } Is it correct way of writing it?
  12. How to style slides in slideshow

    I tried to inspect the other site in chrome and I got lost. Will that be possible for you to provide me some styling help with css only? Anything will help.
  13. How to style slides in slideshow

    Hello, I created bootstrap carousel slideshow. It is working fine. Images I have are like 1000x700. In the slideshow, images look big as expected but do not look good. I like to apply some styling to these images but I failed to do it. I spent about 3 days but failed to figure it out. This site also has images bigger than actual slides. I am not sure how to apply css to the images and wrapper class so images look more professional. Below is the html code: <div class="view view-views-slideshow-home-page slideshow"> <div class="view-content"> <div id="views-bootstrap-carousel-1" class="views-bootstrap-carousel-plugin-style carousel slide"> <!-- Carousel indicators --> <ol class="carousel-indicators"> <li data-target="#views-bootstrap-carousel-1" data-slide-to="0" class=""></li> <li data-target="#views-bootstrap-carousel-1" data-slide-to="1" class="active"></li> </ol> <!-- Carousel items --> <div class="carousel-inner"> <div class="item"> <img typeof="foaf:Image" class="img-responsive" src = "/sites/default/files/insu.jpg" width="1000" height="667" alt=""> </div> <div class="item active"> <img typeof="foaf:Image" class="img-responsive" src="/sites/default/files/ins.jpg" width="1000" height="667" alt=""> </div> </div> <!-- Carousel navigation --> <a class="carousel-control left" href="#views-bootstrap-carousel-1" data-slide="prev"> <span class="icon-prev"></span> </a> <a class="carousel-control right" href="#views-bootstrap-carousel-1" data-slide="next"> <span class="icon-next"></span> </a> </div> </div> </div> CSS: .slideshow{ padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; } .slideshow img{ position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-position: top center; background-size: cover; } Its not doing anything. My slide images taking over entire screen. I am not sure how to apply css so part of the images show in the slides instead of the entire image. Please advise how I can fix it. Thanks.
  14. How to center a div

  15. How to center a div

    Hello, HTML: <section class ="patent"> <div class ="child"> </div> </section> CSS: .parent{text-align:center;} It centers everything inside child class. .child{margin:0 auto;} It does nothing. How can I place div class child in the center of the page? I will have other div classes inside child classes. I would like to center child div instead of centering elements inside the child class. Please advise.