I'e been using joomla default template: Protostar. From template manager I set a logo and it appears at the left top of each page. How can I shift the logo 100px right?
I'm running joomla 3.2.1 in localhost.
Go to the following file:
root/templates/protostar/css/template.css
Search for the logo and edit or add the following:
#logo {
position: relative;
left: 100px;
}
or on line 6936, you will find the .site-title { } block, which you can replace with the following:
.site-title {
font-size: 40px;
font-weight: bold;
left: 100px;
line-height: 48px;
position: relative;
}
In future, start getting used to your browser console and start inspecting elements. If you're using Firefox, then I would recommend using Firebug.
Related
I'm trying to use WP Web Scraper plugin with WP in my site www.eastwickpark.co.uk to get online ratings of the practice from another site
https://www.iwantgreatcare.org/gpsurgeries/eastwick-park-medical-practice
I used this code snippet
<img src="http://www.eastwickpark.co.uk/wp/wp-content/uploads/2015/11/iwantgreatcarelogo.png" />
<div>
[wpws url="https://www.iwantgreatcare.org/gpsurgeries/eastwick-park-medical-practice" query=".image-middle" basehref="1" ]
</div>
Then I used custom CSS in the themes stylesheet editor
.btn.blue,
div .btn.blue {
font-size: 16px;
padding: 8px 16px;
}
/*** Stars ***/
.sprite-icons.star-blue-outline {
background-image: url('http://www.eastwickpark.co.uk/wp/wp-content/uploads/2015/11/star-blue-outline.png');
width: 19px;
height: 17px;
}
.sprite-icons.star-blue-fill {
background-image: url('http://www.eastwickpark.co.uk/wp/wp-content/uploads/2015/11/star-blue.png');
width: 19px;
height: 17px;
}
.sprite-icons.star-blue-half {
background-image: url('http://www.eastwickpark.co.uk/wp/wp-content/uploads/2015/11/star-blue-half.png');
width: 19px;
height: 17px;
}
.sprite-icons.caret-white {
background-image: url('http://www.eastwickpark.co.uk/wp/wp-content/uploads/2015/11/caret-white.png');
width: 10px;
height: 14px;
}
I've got a problem with my CSS in that the button "wraps".
Tried to just get the star rating targeting the class "raty-rating-wrapper-readonly" part but then I get a whole load of vertical stars.
i.e. if i use
[wpws url="https://www.iwantgreatcare.org/gpsurgeries/eastwick-park-medical-practice" query=".raty-rating-wrapper-readonly" basehref="1" ]
I get a whole vertical list of 5 * images?
If I use image-middle div like this
[wpws url="https://www.iwantgreatcare.org/gpsurgeries/eastwick-park-medical-practice" query=".image-middle" basehref="1" ]
I get a weird wrap on the button.
Can't figure this out, and have to admit I'm not a CSS guru. Any insight would be gratefully received.
I've got a problem with my CSS in that the button "wraps"
The cause of the wrapping behaviour is due to <br> tag dynamically generated by WordPress. You can either fix it by following the guideline here: Stop WordPress automatically adding <br> tags to post content
The above post is a plus for you because it also removes the <p> tags that are dynamically generated. I just browsed through your code and found a lot of unwanted p tags.
Can't figure this out, and have to admit I'm not a CSS guru. Any
insight would be gratefully received.
Since you hinted for a CSS solution, a simple fix is to hide the br tags using #widgets .textwidget br { display: none; }. Alternatively #widgets .textwidget a { display: inline-flex; align-items: center } fixes the space and aligns the arrow image as the br tag is ignored inside and initial direction of flex is row.
Unwrapped button:
How do I get dashicons to work in a WordPress meta box? I want to do something similar to the calendar icon that is in the "Publish" meta box next to "Published on".
I have no trouble at all using them as the icon for the custom post type and in the "At a glance" on the dashboard.
This is what I am doing:
#time_control_area #expire:before {
content: "\f235";
top: -1px;
}
And this is my result:
I have tried to enque the dashicons styles which has not worked. I cannot find good documentation anywhere on how the dashicons work with WordPress.
Inspecting the back end of one of my sites, the styling for each of the :before tags that show the WP-default icons seems to be hard coded into wp-admin\load-styles.php.
It looks like you'll need to manually add font: 400 20px/1 dashicons; and possibly some of the other rules to your css to get this to work. Alternately, you could try applying one of the classes WP uses your menu item.
Full css I see for the WP-default icons:
#post-body #visibility:before, #post-body .misc-pub-revisions:before,
.curtime #timestamp:before {
font: 400 20px/1 dashicons;
speak: none;
display: inline-block;
padding: 0 2px 0 0;
top: 0;
left: -1px;
position: relative;
vertical-align: top;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-decoration: none!important;
}
I am creating a website on Wordpress and I would like to have a horizontal navigation menu in my header with the logo in the center as a link to the homepage. I have been able to create this look using the Wordpress menu, but when I look at the website on my phone the "home" link is situated in the center, which isn't how I would like it to be ordered.
Using the current template (HTML) is there a way to finagle the CSS so the nav menu looks similar to these guys: http://bostonscally.com?
Thanks!
#mpcth_page_header_content #mpcth_logo_wrap #mpcth_logo {
display:none;
}
#mpcth_page_header_content {
text-align: center;
padding: 0px 0px 0px 0px;
}
#mpcth_menu {
font-size: 18px;
font-weight: bold;
padding: 10px;
display: inline-flex;
}
#mpcth_menu .menu-item-166 > a {
position: relative;
background-image:url('/wp-content/uploads/2014/01/Bostin-Irish-Header_Woo.png');
background-repeat: no-repeat;
background-position: 0px 0px 0px 0px;
width: 300px;
height: 100px;
text-indent: -9000px;
padding: 0px;
}
#mpcth_page_header_content #mpcth_controls_wrap {
padding-right: 2em;
vertical-align: middle;
}
I recently answered a question similar to this.
It can be found here: How to add a custom item to a specific WordPress menu item position
There are 3 options as i said in the answer above.
jQuery, PHP or HTML/CSS and its down to what you are most comfortable with and if it is for a client, what they most prefer.
I would personally go with the PHP way and split the navigation in 2 and have the logo in the middle.
EDIT
So you'll need the jQuery version.
Your navigation will need to be setup with Home being the first element on the navigation. This will mean that the mobile version will have home as the first link.
Next you need to add the jQuery below underneath your inclusion of the jQuery library
jQuery(document).ready(function() {
jQuery("ul#mpcth_menu").find("li:contains('Home')").hide(); // hides home from navigation
var position = jQuery("ul#mpcth_menu li").length-1;
var i = 0;
jQuery('ul#mpcth_menu li').each(function() {
if(i == position/2) {
jQuery(this).after('<img src="http://www.bostonirishclothing.com/wp-content/uploads/2014/01/Bostin-Irish-Header_Woo.png" width="250" />');
}
i++;
});
});
This code removes the first element from the main nav, being the Home button, then figures out how many is left and places the logo into the middle.
You will also need to remove the CSS which adds the logo to the class menu-item-166 as this may cause problems.
Hope this fixes your problems.
DEMO
I have some alignment problem in my coding. In Windows, all the browsers seems okay. But when I checked it in Mac firefox, the alignment is not perfect. I can fix it by changing the value a bit. But it should be only for Firefox on Mac.
Is there any CSS attributes or something for this?
Example: http://jsfiddle.net/9chk5/
.notes {
display: inline-block;
position: relative;
width: 16px;
height: 16px;
margin: 0 auto;
background: #abc;
}
.search-notes {
font-size: 14px;
color: #484848;
position: relative;
top: -20px;
margin: 0 25px 0 22px;
}
and the HTML
<div class="notes" style="top:2px"></div><div class="search-notes">This link is used to get information about the visitors from the google organic search. This link is used to get information about the visitors from the google organic search. This link is used to get information about the visitors from the google organic search. This link is used to get information about the visitors from the google organic search. </div>
</div>
You can use classes to achieve what you want. Sniff out the user's Browser and OS and add a class to body for your specific case. E.g. apply macFirefox class to body if user is using Firefox on Mac, then in CSS use .macFirefox .yourClass { /*CSS rules*/ }.
However it will be better to apply styles in a way which are crossbrowser.
For example in your particular case changing style to
.search-notes {
font-size: 14px;
color: #484848;
position:absolute;
display:inline;
/* position: relative;
top: -20px;
margin: 0 25px 0 22px; */
}
should do the trick.
Updated your fiddle
You can step into the gray area of undocumented feature queries. This way you can target only Firefox on Mac:
#supports (-moz-osx-font-smoothing: auto) {
#firefox-on-mac { display: block; }
}
And if you want to target all Firefox, except those which are on Mac, do this:
#supports (-moz-appearance: none) and (not (-moz-osx-font-smoothing: auto)) {
#firefox-not-on-mac { display: block; }
}
I am deliberately not using #-moz-document, because it has been disabled for public use per Firefox bug #1035091.
See this codepen for practical example.
I'm working with webcams and have experienced a weird issue.
I have a flash object with my webcam video, and I have put a div over it (with absolute positioning), as a button to toggle the video. The HTML is something like this:
<div id="container">
<object></object>
<div class="camicon"></div>
</div>
And the CSS:
div.camicon {
height: 32px;
width: 32px;
background-image: url('../../images/broadcast/webcam-icon.png');
position: absolute;
top: 5px;
right: 5px;
cursor: pointer;
}
The problem now is that, in Firefox, cursor is not restored to its default value (i.e. the arrow) while cursor has left the icon AND stays on the flash object. However, cursor is restored properly when it moves outside the flash object.
This doesn't happen on Chrome, so I guess this may be some annoying bug.
Does anyone know something about this? I have tried lots of possible fixes for it, but no success so far.
More info:
Ubuntu 11.10 32bits
Firefox 13.0.1
Flash 11.2.202.236
I don't have any code to test it, but I would think something like this should work to help force the point (maybe this is one of the solutions you already tried):
#container {
cursor: auto; /* or "default" */
}
#container div.camicon {
height: 32px;
width: 32px;
background-image: url('../../images/broadcast/webcam-icon.png');
position: absolute;
top: 5px;
right: 5px;
cursor: pointer;
}