Jump to content

newcoder1010

Members
  • Content Count

    385
  • Joined

  • Last visited

Community Reputation

3 Neutral

About newcoder1010

  • Rank
    Member

Recent Profile Visitors

23,444 profile views
  1. Complete html for that region: <header class="navbar navbar-default" id="navbar" role="banner"> <div class="navbar-header"> <div class="region region-navigation"> <section id="block-callxs" class="hidden-sm hidden-md hidden-lg col-xs-12 block block-block-content block-block-content004572fb-7e9a-4693-9b0d-57f14d99fc7e clearfix"> <div class="field field--name-body field--type-text-with-summary field--label-hidden field--item"><div class="col-xs-12 cblkbdy"> <div hidden-md="" hidden-lg="" text-center=""> <h2> <span class="glyphicon glyphicon-earphone"></span> 256 - 200 - 9808 </h2> </div> <div class="hidden-xs"><span class="glyphicon glyphicon-earphone"></span><p><span class="callussp hidden-xs">Call Us Now </span> </p><h2> 256 - 200 - 9808</h2> </div> </div></div> </section> <nav role="navigation" aria-labelledby="block-subboottheme-main-menu-menu" id="block-subboottheme-main-menu"> <h2 class="sr-only" id="block-subboottheme-main-menu-menu">Main navigation</h2> <div data-mediasize="992" class="responsive-menus responsive-menus-0-1-0 absolute responsified"><span class="toggler">☰ Menu</span><ul class="responsive-menus-simple" id="rm-removed"> <li class="first"> <a href="/" data-drupal-link-system-path="<front>" class="is-active">Home</a> </li> <li> <a href="/node/4" data-drupal-link-system-path="node/4">How it works</a> </li> <li> <a href="/node/6" data-drupal-link-system-path="node/6">About Us</a> </li> <li class="last"> <a href="/node/5" data-drupal-link-system-path="node/5">Contact Us</a> </li> </ul></div> </nav> </div> </div> </header>
  2. The hidden-sm here means hide it for tablet devices. That is the phone number block. That is the block is fixed positioned. col-xs-12 is for mobile and it is displaying on mobile just fine. So when I place this first block fixed #block-callxs Second block is not visible: <nav role="navigation" aria-labelledby="block-subboottheme-main-menu-menu" id="block-subboottheme-main-menu" class="contextual-region"> <h2 class="sr-only" id="block-subboottheme-main-menu-menu">Main navigation</h2> <div data-mediasize="768" class="responsive-menus responsive-menus-0-1-0 absolute"><span class="toggler">☰ Menu</span><ul class="responsive-menus-simple menu menu--main nav navbar-nav" id="rm-no-id"> </div> </nav> I like to place the second block under the first block. Now I only see the first block. I can see both blocks if I remove fixed.
  3. Hello, I have a heading tag: <h1> We buy cars city</h1> I like to break it as "we buy cars" (one line) and then "city" goes to second line. I can not break it in html. How to break it in two lines and then center the both lines? Thank you!
  4. HTML: <div class="region region-navigation"> <section data-quickedit-entity-id="block_content/14" id="block-callxs" class="hidden-sm hidden-lg col-xs-12 contextual-region block block-block-content block-block-content004572fb-7e9a-4693-9b0d-57f14d99fc7e clearfix" data-quickedit-entity-instance-id="0"> </section> <nav role="navigation" aria-labelledby="block-subboottheme-main-menu-menu" id="block-subboottheme-main-menu" class="contextual-region"> <h2 class="sr-only" id="block-subboottheme-main-menu-menu">Main navigation</h2> <div data-mediasize="768" class="responsive-menus responsive-menus-0-1-0 absolute"><span class="toggler">☰ Menu</span><ul class="responsive-menus-simple menu menu--main nav navbar-nav" id="rm-no-id"> </div> </nav> </div> For mobile CSS: #block-callxs{ background: blue; color: white; text-align: center; position: fixed; z-index:99; } When I visit the mobile page, I see the position fixed but the responsive-menus block not visible. How to display the responsive menus below the callxs block? Thanks
  5. Hello, I like to apply css to all anchor texts regardless how the a links are coded. I put that code and I notice that css does not apply to all anchors. /* unvisited link */ a:link { color: red; } /* visited link */ a:visited { color: green; } /* mouse over link */ a:hover { color: hotpink; } /* selected link */ a:active { color: blue; } Below shows two examples how anchors look like on the page: <nav class="toolbar-lining clearfix" role="navigation" aria-label="Administration menu"> <h3 class="toolbar-tray-name visually-hidden">Administration menu</h3> <div class="toolbar-menu-administration"><ul class="toolbar-menu"> <li class="menu-item menu-item--collapsed"><a href="/admin/content" title="Find and manage content." id="toolbar-link-system-admin_content" class="toolbar-icon toolbar-icon-system-admin-content" data-drupal-link-system-path="admin/content">Content</a></li> <li class="menu-item menu-item--collapsed"><a href="/admin/structure" title="Administer blocks, content types, menus, etc." id="toolbar-link-system-admin_structure" class="toolbar-icon toolbar-icon-system-admin-structure" data-drupal-link-system-path="admin/structure">Structure</a></li> </div></div></nav> <ul class="menu menu--main nav navbar-nav responsive-menus-simple" id="rm-no-id"> <li class="first"> <a href="/" data-drupal-link-system-path="<front>" class="is-active">Home</a> </li> <li> <a href="/node/4" data-drupal-link-system-path="node/4">How it works</a> </li> <li> <a href="/node/6" data-drupal-link-system-path="node/6">About Us</a> </li> <li class="last"> <a href="/node/5" data-drupal-link-system-path="node/5">Contact Us</a> </li> </ul> These anchors show different ways in different places like blocks, sections, views, menu, etc. Regardless, how these are coded, how to apply the above styling? Currently, it works for some and does not work for others. Thank you!
  6. Hello, I am trying to create a block as per the design I attached here. This is the link I am playing around here but I could not do it. I was wondering if you could help me providing me the complete html using the bootstrap theme, I would really appreciate. Thanks.
  7. Hello, HTML: <div class="carousel-inner"> <div class="item active"> <img class="home-img-slideshow" title="Slide 2" alt="Slide 2" src="1.jpg"> <div class="carousel-caption"> <h4> <a href="http://drupal-8-6-5.dd:8083/node/11">Slide 1</a></h4> <p>teaser 1... </p> </div> </div> <div class="item "> <img class="home-img-slideshow" title="Slide 2" alt="Slide 2" src="2.jpg"> <div class="carousel-caption"> <h4> <a href="http://drupal-8-6-5.dd:8083/node/11">Slide 2</a></h4> <p>teaser 2... </p> </div> </div> </div> I would like to place text inside first carousel-caption to left and place text inside second carousel-caption to the right. I have done the following but it is not working. CSS: .carousel-caption:nth-child(1) {text-align:left;} .carousel-caption:nth-child(2) {text-align:right;} Please advise.
  8. 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?
  9. 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.
  10. 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.
  11. 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.
  12. 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.
×
×
  • Create New...