Jump to content

newcoder1010

Members
  • Content count

    377
  • Joined

  • Last visited

Everything posted by newcoder1010

  1. newcoder1010

    How to overwrite element.style

    Thanks.
  2. newcoder1010

    How to overwrite element.style

    Hello, Inspected my site in chrome. Selected this link: <form class="form-view theme7" id="agile-form" action="" style="max-width:450px;" method="GET"> I see this css: element.style {max-width:450px;} .form-view { font-family: Tahoma,Geneva,sans-serif; width: 100%; background: #fff; font-size: 14px; padding: 10px; } Now form shows 450px width. I would like the form to be 100% width. How to make the form 100% width?
  3. newcoder1010

    How to remove weird space of mobile menu bars

    Hello, I see a space to the right of mobile menu bars. I just cant fix it. How can I remove the space to the right of mobile menu? If you could see the link for an image, it might help you to understand my problem. <div data-mediasize="992" class="responsive-menus responsive-menus-0-1 absolute responsified"> <span class="toggler">☰ </span> <section id="rm-removed" class="responsive-menus-simple"> <ul class="rm-removed" id="rm-removed"> </ul> </section></div> .responsive-menus.responsified { margin-top: 130px; margin-right: 0; margin-left: 0; padding: 0; } .responsive-menus.responsified { clear: both; width: 100%; } https://drive.google.com/open?id=1CuZEdWwRkg1tAFR9HQTGZdali3RtYlYG Thanks.
  4. newcoder1010

    How to place the logo in the center of anchor

    Thanks.
  5. newcoder1010

    How to place the logo in the center of anchor

    Hello, HTML: <a class="logo navbar-btn pull-left" href="/" title="Home"> <img src="/sites/default/files/mmmo_0.jpg" alt="Home"> </a> My CSS .logo {text-align:center;} Currently, image is floated to left I guess because of bootstrap default pull-left class. When I click on a class in chrome inspect, I get this css: .navbar .logo { margin-right: -15px; padding-left: 15px; padding-right: 15px; } .pull-left { float: left !important; } I wont be able to change any html classes. How can I place the logo in the center of logo class? Thanks.
  6. newcoder1010

    How to place the logo in the center of anchor

    Sorry did not see @dsonesuk post. I tried this and worked. .navbar .logo { margin-right: -15px; padding-left: 15px; padding-right: 15px; text-align: center; display: block; float: none !important; } Thanks.
  7. newcoder1010

    How to place the logo in the center of anchor

    I tried this but no luck. .navbar .logo { margin-right: -15px; padding-left: 15px; padding-right: 15px; text-align: center; } .pull-left { float: none !important; } Please advise.
  8. newcoder1010

    How to overwrite list style

    Hello, HTML: <ul class="menu nav"> <li class="first leaf active-trail visited active"><a href="</a></li> <li class="leaf"><a href="</a></li> </ul> CSS from bootstrap cdn has this: .nav { list-style: none; } ul li.collapsed, ul li.expanded, ul li.leaf { list-style: none; } How to overwrite to display the bullets next to list item?
  9. newcoder1010

    How to overwrite list style

    Unfortunately I am not able to remove the classes and add a new class. How can I overwrite?
  10. newcoder1010

    How to edit my post

    Hello, How can I edit my old post? I do not see any edit option to edit an old post? Thanks.
  11. newcoder1010

    How to fix carousel slideshow padding issue

    Max height fixed it. I spent hours for that. Thanks.
  12. newcoder1010

    How to fix carousel slideshow padding issue

    Hello, I spent hours to fix it but no luck. I created slideshow using carousel. Original size of each image is 1500x650px. CSS to parent class and slideshow images. .front .carousel-inner { position: relative; width: 100%; overflow: hidden; height: 550px; } .front .view-sliders img { width: 100%; } When I visit the site in laptop, it looks ok. As I am making the screen smaller, I see padding between bottom of image and bottom of parent. I can fix the padding by giving height:100% instead of giving height:550px to parent. Problem with that is the image height in laptop looks big. When I get to mobile screen, I have this. I can kind of accept it as is. front .carousel-inner { height: 100%; } At his point, I am asking you to help me fixing it. You can provide any recommendations to make it responsive slideshows. I would like to keep the slideshow images height about 550px by cropping the images. This is my site. If you could visit my site and help me, I would really appreciate it. Thanks.
  13. newcoder1010

    How to style mobile menu

    Hi, I have this code to make the mobile menu (3 bars) to green. .responsive-menus.responsified span.toggler { padding: 0; display: block; color: green; border-radius: 0; background: #fff; box-shadow: 0px 0px 0px #000; font-size: 3.35em; text-align: center; /* cursor: pointer; */ margin: 0; outline: none; /* width: 100px; */ } When I view the page in desktop and then make screen mobile size, I see the mobile menu is green. When I visit the page in mobile phone, bar is kind of black. I am not sure why my phone does not show the color green. How to overwrite to make sure mobile menu bars are green? Thanks.
  14. newcoder1010

    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.
  15. newcoder1010

    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.
  16. newcoder1010

    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.
  17. newcoder1010

    How to apply hover, focus, active selector for all links

    Thanks. I will use both options depending on site.
  18. 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.
  19. newcoder1010

    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.
  20. newcoder1010

    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.
  21. newcoder1010

    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.
  22. newcoder1010

    How to write if else

    Thank you. Above code what I needed.
  23. newcoder1010

    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?
  24. newcoder1010

    How to place arrow to slideshow next and prev buttons

    Never mind. I removed some code and now it is working. Thanks.
  25. 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.
×