Please take a look at this mobile view of my blog: http://jieshangxiaochi.blogspot.com/?m=1
There's a cross (www.google.com/uds/css/clear.gif) that appears only if I enable blogger search widget, but that's it. No seach box, no search button, nothing.
What I have tried (and doesn't work):
1. Adding mobile='yes' to the search widget.
2. Adding mobile='no' to the search widget.
I didn't try adding mobile='only' to the search widget, because I want it to show on the desktop version.
Does anyone here have a solution?
EDIT:
here's the code
<b:widget id='CustomSearch1' locked='false' mobile='no' title='sōusuǒ<br>搜索<br>search' type='CustomSearch'>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<div expr:id='data:widget.instanceId + "_form"'>
<span class='cse-status'><data:loadingMsg/></span>
</div>
</div>
<!-- override gsearch.css -->
<style type='text/css'>
#uds-searchControl .gs-result .gs-title,
#uds-searchControl .gs-result .gs-title *,
#uds-searchControl .gsc-results .gsc-trailing-more-results,
#uds-searchControl .gsc-results .gsc-trailing-more-results * {
color:<data:linkColor/>;
}
#uds-searchControl .gs-result .gs-title a:visited,
#uds-searchControl .gs-result .gs-title a:visited * {
color:<data:visitedLinkColor/>;
}
#uds-searchControl .gs-relativePublishedDate,
#uds-searchControl .gs-publishedDate {
color: <data:dateColor/>;
}
#uds-searchControl .gs-result a.gs-visibleUrl,
#uds-searchControl .gs-result .gs-visibleUrl {
color: <data:urlColor/>;
}
#uds-searchControl .gsc-results {
border-color: <data:borderColor/>;
background-color: <data:backgroundColor/>;
}
#uds-searchControl .gsc-tabhActive {
border-color: <data:borderColor/>;
border-top-color: <data:activeBorderColor/>;
background-color: <data:backgroundColor/>;
color: <data:textColor/>;
}
#uds-searchControl .gsc-tabhInactive {
border-color: <data:borderColor/>;
background-color: transparent;
color: <data:linkColor/>;
}
#uds-searchClearResults {
border-color: <data:borderColor/>;
}
#uds-searchClearResults:hover {
border-color: <data:activeBorderColor/>;
}
#uds-searchControl .gsc-cursor-page {
color: <data:linkColor/>;
}
#uds-searchControl .gsc-cursor-current-page {
color: <data:textColor/>;
}
</style>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
I've had this problem now and I've solved by adding "mobile='yes'"on the html editor inside the widget, now looks like "id='CustomSearch1' locked='false' mobile='yes' title='Cerca nella trincea' type='CustomSearch' visible='true'"
BTW the blog is https://labaionetta.blogspot.it
Related
Need to change the logo color on hover, than change it on scroll.
I got it to change on hover, but having trouble changing it on scroll. Can someone please look at my JSFiddle and help?
Maybe it's just the classes that are clashing or my JS logic, maybe I need to step off and let my brain refresh.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style>
.newROInav {
padding: 40px;
width: 100%;
transition-duration: 0.5s;
transition-timing-function: ease-in-out;
}
.newROInav:hover {
background-color: white;
}
.light {
display: block;
}
.dark {
display: none;
}
.newROInav:hover div[class="dark"] {
display: block;
}
.newROInav:hover div[class="light"] {
display: none;
}
$color-darkgreen: #006072;
html,
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 16px;
padding: 0;
margin: 0;
width: 100vw;
height: 1000vw;
}
body p {
padding: 40px;
}
.sticky-top {
position: sticky;
top: 0px;
z-index: 1020;
}
ul,
li {
padding: 0;
margin: 0;
}
main {
transition: background-color 0.3s ease;
background-color: $color-darkgreen;
margin: 0;
padding: 0;
position: fixed;
text-align: center;
top: 0;
width: 100vw;
ul {
width: 100%;
height: 100%;
position: relative;
padding: 30px;
li {
display: inline;
top: 50%;
padding: 2rem;
a {
color: #fff;
}
}
}
&.inverted {
background-color: #fff;
box-shadow: 0 3px 5px 0.3px rgba(0, 0, 0, 0.1);
a {
color: $color-darkgreen;
}
}
}
</style>
<main class="newROInav sticky-top">
<div class="test">
<div class="dark">
<ul>
<li><img src="http://newnavstg.wpengine.com/wp-content/uploads/logo-dark.svg" /></li>
</ul>
</div>
<div class="light">
<ul>
<li><img src="http://newnavstg.wpengine.com/wp-content/uploads/logo.svg" /></li>
</ul>
</div>
</div>
</main>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ipsa reiciendis quas, optio ullam debitis adipisci et
voluptates tenetur? Dolor ea optio aspernatur? Aspernatur, omnis ea consequuntur cum quod asperiores veniam.
</p>
<script>
var className = "inverted";
var scrollTrigger = 60;
window.onscroll = function() {
// We add pageYOffset for compatibility with IE.
if (window.scrollY >= scrollTrigger || window.pageYOffset >= scrollTrigger) {
document.getElementsByTagName("main")[0].classList.add(className);
} else {
document.getElementsByTagName("main")[0].classList.remove(className);
}
};
</script>
i have athis code it is toggle the name after click on icon, i want to open drop down menu when click on this icon, i must to enter 2 times one to open the icon name and second to dropdown menu
`
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
.dropbtn {
background-color: #3498db;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover,
.dropbtn:focus {
background-color: #2980b9;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {
background-color: #ddd;
}
.show {
display: block;
}
</style>
<link rel="stylesheet" href="./inside.css">
</head>
<body>
<div class="positioner">
<div class="menu">
<div class="menu_item">
<input
class="toggle"
name="menu_group"
id="sneaky_toggle"
type="radio"
/>
<div class="expander">
<label for="sneaky_toggle"
><i class="menu_icon fa fa-user"></i>
<span class="menu_text">المفتش</span>
</label>
</div>
</div>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn"></button>
<div id="myDropdown" class="dropdown-content">
Home
About
Contact
</div>
</div>
<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function (event) {
if (!event.target.matches(".dropbtn")) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains("show")) {
openDropdown.classList.remove("show");
}
}
}
};
</script>
</body>
</html>
`
I JUST can add an select menu but i must click 2 times
i need to belick this picture when click on iconenter image description here
I have been struggling with the flexbox column layout. I am trying to create a 3 column layout that stretch vertically all the way to the end of the page (height:100%;). However, 2 of the columns must have specific widths that still scale down on different size screens, is this possible?
CSS:
.container {
display: -webkit-flex;
display: flex;
height: 100%;
}
.initial {
-webkit-flex: initial;
flex: 1;
width: 510px;
min-width: 100px;
}
.flex1 {
-webkit-flex-basis: 28px; /* Safari 6.1+ */
flex-basis: 28px;
}
.flex2 {
-webkit-flex: 2;
flex: 2;
}
HTML
<div class="container">
<section class="elem initial">
<div id="Left">
<h1>Heading</h1>
<p>Lorem Ipsum...</p>
</div>
</section>
<section class="elem flex1">
<div class="col"><img src="img/stripe"/></div>
</section>
<section class="elem flex2">
<div id="Right">
<h2>Header</h2>
<ul>
<li>List item.</li>
</ul>
</div>
</section>
</div>
Here's a working example of what you might be looking for, if I've understood the question correct.
I've commented the important stuff in the code. Take a look at the code, and compare it with your own. You've been using some unnecessary flexbox elements such as flex-basis: 28px; which should just be width: 28px;
HTML
<div class="container">
<section class="elem initial">
<div id="Left">
<h1>Heading</h1>
<p>Lorem Ipsum...</p>
</div>
</section>
<section class="elem flex1">
<div class="col"><img src="img/stripe"/></div>
</section>
<section class="elem flex2">
<div id="Right">
<h2>Header</h2>
<ul>
<li>List item.</li>
</ul>
</div>
</section>
</div>
CSS
html, body {
height: 100%; /* Makes it possible to illustrate the full 100% height */
}
.container {
display: flex; /* Adds flex functionality */
height: 100%;
}
.initial {
width: 510px;
min-width: 100px;
background-color: orange;
}
.flex1 {
width: 28px;
background-color: red;
}
.flex2 {
flex: 1; /* Fills the rest of the available space */
background-color: green;
}
UPDATE
I forked the pen in order to create a new working example based on the comments from the author of this question. He wanted the columns to wrap and the gutter to disappear at a certain size - I've used media queries to accomplish this.
Link to the new forked CodePen
HTML is the same.
CSS
html, body {
height: 100%; /* Makes it possible to illustrate the full 100% height */
}
.container {
display: flex; /* Adds flex functionality */
flex-direction: column;
height: 100%;
}
#media all and (min-width: 768px) {
.container {
flex-direction: row;
}
}
.initial {
width: 510px;
min-width: 100px;
background-color: orange;
}
.flex1 {
display: none;
}
#media all and (min-width: 768px) {
.flex1 {
display: flex;
width: 28px;
background-color: red;
}
}
.flex2 {
flex: 1; /* Fills the rest of the available space */
background-color: green;
}
Remember your vendor-prefixes.
I have a problem with 2 pictures staying one aboce the other. I am trying to make the plane stay above the cloud. But, even if I have set the position and z-index, they stil stay one near the other.
How can I make the plane stay above the cloud?
Thank you!
HTML:
<html>
<body>
<div id="main">
<div id="header">
<img id="logo" src="images/logo.png" />
<ul>
<li>Home</li>
<li>Oferte Turism</li>
<li>Despre noi</li>
<li>Contact</li>
</ul>
</div>
<div id="body">
<div id="leftup">
<img id="cloud" src="images/cloud.png" />
<img id="plane" src="images/plane.png" />
</div>
<div id="form"></div>
<div id="offers"></div>
</div>
<div id="body2"></div>
<div id="footer"></div>
</div>
</body>
</html>
CSS:
body {margin:0;
padding:0;
}
#body {height: 900px;
background-image: url('images/headerbg.png');
}
#main {width: 960px;
margin: 0px auto;
}
#header {height: 80px;
background-image: url('images/hd.png');
background-repeat: no-repeat;
}
ul { list-style-type: none;
font-family: Verdana;
font-size: 14px;
}
li { display: inline;
padding:20px;
float:left;
margin-left: 35px;
}
li a { text-decoration:none;
color:white;
font-style:bold; <!-- NO BOLD -->
}
li a:hover { text-decoration:underline;
}
#logo {margin-left: 30px;
float:left;
}
#leftup {clear:both;
float:left;
margin-top:50px;
}
#cloud {width:250px;
position:relative;
z-index:1;
}
#plane {width:250px;
position:relative;
z-index:10;
}
#form {float:right;
border: solid 1px blue;
height:200px;
width: 100px;
margin-right:30px;
}
#offers {border: solid 1px yellow;
clear:both;
margin: 100px auto;
height: 300px;
width: 500px;}![enter image description here][2]
#body2 { height:600px;
background-image: url('images/bodybg.png');
}
#footer {height: 100px;
background-image: url('images/footerbg.png');
}
I'm getting crazy to change the colours in the custom google search we have implemented at work... been researching for a few hours and nothing...
we are using this:
<div id="search">
<div id="results_007269481408127051346:b2b1fyxrklw"></div>
</div>
<script type="text/javascript">
var googleSearchIframeName = "results_007269481408127051346:b2b1fyxrklw";
var googleSearchFormName = "searchbox_007269481408127051346:b2b1fyxrklw";
var googleSearchFrameWidth = 600;
var googleSearchFrameborder = 0;
var googleSearchDomain = "www.google.com";
var googleSearchPath = "/cse";
var googleSearchResizeIframe = true;
</script>
<script type="text/javascript"
src="http://www.google.com/afsonline/show_afs_search.js"></script>
Do you know if theres any other var that I can add to these parameters to change the blue and the green color that come by default in the search?
Thanks a lot folks!
When you go to Google Webmaster Tools and then to Labs > Custom Search you can configure a new search engine. There are 4 tabs, in the second tab Look and Feel you can customize its appearance.
This style-sheet should be generated and putting this in your style-sheet should edit its appearance :)
<style type="text/css">
.gsc-control-cse {
font-family: Verdana, sans-serif;
border-color: #FF0000;
background-color: #999999;
}
.gsc-control-cse .gsc-table-result {
font-family: Verdana, sans-serif;
}
input.gsc-input {
border-color: #FFFFCC;
}
input.gsc-search-button {
border-color: #999999;
background-color: #FFCC00;
}
.gsc-tabHeader.gsc-tabhInactive {
border-color: #E9E9E9;
background-color: #E9E9E9;
}
.gsc-tabHeader.gsc-tabhActive {
border-top-color: #FF9900;
border-left-color: #E9E9E9;
border-right-color: #E9E9E9;
background-color: #FFFFFF;
}
.gsc-tabsArea {
border-color: #E9E9E9;
}
.gsc-webResult.gsc-result,
.gsc-results .gsc-imageResult {
border-color: #000000;
background-color: #660000;
}
.gsc-webResult.gsc-result:hover,
.gsc-imageResult:hover {
border-color: #009900;
background-color: #CC33CC;
}
.gsc-webResult.gsc-result.gsc-promotion:hover {
border-color: #009900;
background-color: #CC33CC;
}
.gs-webResult.gs-result a.gs-title:link,
.gs-webResult.gs-result a.gs-title:link b,
.gs-imageResult a.gs-title:link,
.gs-imageResult a.gs-title:link b {
color: #666666;
}
.gs-webResult.gs-result a.gs-title:visited,
.gs-webResult.gs-result a.gs-title:visited b,
.gs-imageResult a.gs-title:visited,
.gs-imageResult a.gs-title:visited b {
color: #C0C0C0;
}
.gs-webResult.gs-result a.gs-title:hover,
.gs-webResult.gs-result a.gs-title:hover b,
.gs-imageResult a.gs-title:hover,
.gs-imageResult a.gs-title:hover b {
color: #999999;
}
.gs-webResult.gs-result a.gs-title:active,
.gs-webResult.gs-result a.gs-title:active b,
.gs-imageResult a.gs-title:active,
.gs-imageResult a.gs-title:active b {
color: #666666;
}
.gsc-cursor-page {
color: #666666;
}
a.gsc-trailing-more-results:link {
color: #666666;
}
.gs-webResult .gs-snippet,
.gs-imageResult .gs-snippet,
.gs-fileFormatType {
color: #CCCCCC;
}
.gs-webResult div.gs-visibleUrl,
.gs-imageResult div.gs-visibleUrl {
color: #330000;
}
.gs-webResult div.gs-visibleUrl-short {
color: #330000;
}
.gs-webResult div.gs-visibleUrl-short {
display: none;
}
.gs-webResult div.gs-visibleUrl-long {
display: block;
}
.gs-promotion div.gs-visibleUrl-short {
display: none;
}
.gs-promotion div.gs-visibleUrl-long {
display: block;
}
.gsc-cursor-box {
border-color: #000000;
}
.gsc-results .gsc-cursor-box .gsc-cursor-page {
border-color: #E9E9E9;
background-color: #660000;
color: #666666;
}
.gsc-results .gsc-cursor-box .gsc-cursor-current-page {
border-color: #FF9900;
background-color: #FFFFFF;
color: #C0C0C0;
}
.gsc-webResult.gsc-result.gsc-promotion {
border-color: #336699;
background-color: #FFFFFF;
}
.gsc-completion-title {
color: #666666;
}
.gsc-completion-snippet {
color: #CCCCCC;
}
.gs-promotion a.gs-title:link,
.gs-promotion a.gs-title:link *,
.gs-promotion .gs-snippet a:link {
color: #0000CC;
}
.gs-promotion a.gs-title:visited,
.gs-promotion a.gs-title:visited *,
.gs-promotion .gs-snippet a:visited {
color: #0000CC;
}
.gs-promotion a.gs-title:hover,
.gs-promotion a.gs-title:hover *,
.gs-promotion .gs-snippet a:hover {
color: #0000CC;
}
.gs-promotion a.gs-title:active,
.gs-promotion a.gs-title:active *,
.gs-promotion .gs-snippet a:active {
color: #0000CC;
}
.gs-promotion .gs-snippet,
.gs-promotion .gs-title .gs-promotion-title-right,
.gs-promotion .gs-title .gs-promotion-title-right * {
color: #000000;
}
.gs-promotion .gs-visibleUrl,
.gs-promotion .gs-visibleUrl-short {
color: #008000;
}</style>