I create a child theme, but then I want to add some style it not change in my main menu.
I create a folder aloshop-child in the direction
\public_html\wp-content\themes
In this folder I create two files style.css and function.php
In function.php I added code:
<?php
function aloshop_child_enqueue_styles() {
$parent_style = 'aloshop';
wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'aloshop',
get_stylesheet_directory_uri() . '/style.css',
array( $parent_style )
);
}
add_action( 'wp_enqueue_scripts', 'aloshop_child_enqueue_styles' );
and in style.css add just simple information
/*
Theme Name: Aloshop child theme
Author: Mantas Slau
Description: A child theme of the Aloshop default WordPress theme
Version: 1.1
Template: aloshop
*/
Next what I did, in the dashboard activated this child theme.
So I tried to check if this child theme works. I cut from my visual composer custom css code (which I was temporary added then I developed my page) and paste it in the child theme --> `style.css.
/*
Theme Name: Aloshop child theme
Author: Mantas Slau
Description: A child theme of the Aloshop default WordPress theme
Version: 1.1
Template: aloshop
*/
.footer-box h2 {
font-size: 14px;
font-weight: 700;
margin: 0 0 13px;
text-transform: uppercase;
color: #fe9c00;
}
.menu-footer a {
border-left: 1px solid #dadada;
display: block;
height: 14px;
line-height: 14px;
padding: 0 13px;
color: white;
}
.footer-box p {
color: white;
}
.footer-menu-box-end a {
color: white;
font-size: 14px;
padding-left: 10px;
position: relative;
}
.footer-menu-box-end a:hover{
color: #fe9c00;
}
.footer-menu-box-end h2 {
font-size: 14px;
font-weight: 700;
margin: 0 0 13px;
text-transform: uppercase;
color: #fe9c00;
}
.footer-box-contact a {
color: white;
}
.social-footer li:first-child a{
margin-left:10;
}
.social-footer.social-network label {
margin: 0 0 10px;
color: #fe9c00;
}
.category-home-label span {
color: #fff;
font-size: 12px;
font-weight: 700;
margin: 0;
text-transform: uppercase;
vertical-align: middle;
}
ul {
padding: 0;
list-style: none;
}
.sub-menu-top {
width: 200px;
}
.list-child-category {
min-height: 155px;
}
.woocommerce div.product .product_title {
font-size: 25px;
font-weight: 700;
margin: 0 0 13px;
text-transform: uppercase;
}
.price span {
font-size: 25px;
font-weight: 700;
margin: 0 0 13px;
text-transform: uppercase;
color: #fe9c00;
}
.woocommerce div.product div.images img {
/* display: block; */
/* width: 100%; */
/* height: auto; */
/* box-shadow: none; */
width: 350px;
padding: 1px;
border: 1px solid #e0e0d1;
background-color: #e0e0d1;
}
Style code but it doesn't make sense.
Save ---> refresh and style not working.
Can somebody help with this issue? What do I do wrong? Thanks in advance
In function.php file,
Instead of "aloshop"
wp_enqueue_style( 'aloshop',get_stylesheet_directory_uri() . '/style.css',array( $parent_style ));
use "aloshop-child" to call style.css file.
wp_enqueue_style( 'aloshop-child',get_stylesheet_directory_uri() . '/style.css',array( $parent_style ));
I find a solution. My browser creates cookies. So before the refresh needs press ctrl+f5 and it will clear the browser. My code is good.
Related
I am using PHP sessions to to provide specific forms on a page and need to toggle between a "show form" link and the form. I have this working using jQuery toggle(), but I cannot figure out how to prevent the "show form" link from displaying in both toggle states.
I have experimented with jQuery hide() after toggle(), but this made everything disappear, and I have tried using CSS visibility: hidden (which also just caused everything, including the PHP content, to disappear).
<div id="togLink">
<?php echo $JQclick; ?>
</div>
<div id="showForm">
<?php require_once $_SERVER["DOCUMENT_ROOT"] . '/formInc.php'; ?>
</div>
<script>
function toggleForm() {
$("#showForm").toggle();
$("#togLink").toggle();
}
$("#togLink").click(function() {
toggleForm();
});
$("#showForm").click(function() {
toggleForm();
});
</script>
The above code works, but the PHP output is displayed in both toggle states (which, I know, is the expected behaviour). As I said above, I need some way of making the toggle state "either or" - clickable link or form, not both. Can anyone offer any suggestions for this?
...
...
CSS code:
#font-face {
font-family: 'blair_capsregular';
src: url('../.typefaces/blair_caps-webfont.woff2') format('woff2'),
url('../typefaces/blair_caps-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
#ExBox {
width: 600px;
margin: 50px auto 0 auto;
text-align: justify;
font-family: verdana, arial, sans-serif;
font-size: 11px;
line-height: 1.6;
}
.titleBar {
width:100%;
}
.Tbox {
float:left; height:25px;
text-align: center;
font-size: 15px;
font-family: 'blair_capsregular';
}
#box {
border: 2px solid blue;
margin: 0;
position: static;
padding: 0 2px 0 2px;
text-decoration: none;
}
#box a:link {
color: orange;
text-decoration: none;
}
#box a:visited {
color: orange;
text-decoration: none;
}
.Tbox:nth-child(1) {
width:33.3%;
}
.Tbox:nth-child(2) {
width:33.3%;
}
.Tbox:nth-child(3) {
width:33.3%;
}
.clearRed {
clear: both;
color: red;
}
.Tbox a:link {
color: black;
text-decoration: none;
}
.Tbox a:visited {
color: black;
text-decoration: none;
}
.Tbox a:hover {
color: red;
text-decoration: none;
}
.Tbox a:active {
color: hotpink;
text-decoration: none;
}
.Tbox a:focus {
color: hotpink;
text-decoration: none;
}
/* FORM CSS - Placeholder colors */
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color: #9b9b9b;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #9b9b9b;
opacity: 1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #9b9b9b;
opacity: 1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #9b9b9b;
}
::-ms-input-placeholder { /* Microsoft Edge */
color: #9b9b9b;
}
textarea::placeholder { color: #9b9b9b; font-family: arial; }
/* Colors for focused fields */
input[type=text], input[type=email], textarea {
outline: none;
border: 1px solid #9b9b9b;
}
input[type=text]:focus, input[type=email]:focus, textarea:focus {
border: 1px solid #00C5BE;
}
/* Input styling */
textarea {
font-family: arial;
width: 27rem;
font-size: 1rem;
padding: 0.6rem;
margin-right: 0.5rem;
margin-left: 0.5rem;
border-radius: 5px;
border: 1px solid #9b9b9b;
color: #9b9b9b !important;
}
.contact-form-div input {
display: block;
font-size: 1rem;
width: 27rem;
padding: 0.6rem;
margin: 0.5rem;
border-radius: 5px;
border: 1px solid #9b9b9b;
color: #9b9b9b !important;
}
.contact-form-div input[type=submit] {
width: auto;
background-color: #00C5BE;
border: none;
color: #fff !important;
font-size: 1em;
padding: 10px 50px;
text-transform: uppercase;
font-weight: normal;
}
/* Hide the fake field */
#m66 {
display: none;
}
/* VERTICAL SLIDER */
* { margin:0; padding:0; }
a { text-decoration: none; }
.expand {
background: #fff;
overflow: hidden;
color: #000;
line-height: 50px;
transition: all .5s ease-in-out;
height: 0;
}
.expand:target {
height: 50px;
}
.close {
max-height: 0;
}
/* JQUERY TESTING */
.box{
display:none;
}
#showForm {
display: none;
}
...
...
Thanks to Grant Noe this is almost working. With the above code everything works perfectly ...except that clicking on the form causes it to disappear. Grant has since revised the code (again, thanks); but the revised code, whilst addressing the problem of the disappearing form, has a visible "contact form" link in both toggle states and loads the form first, not the link. The latter should be simple to fix; but I cannot figure out how to show either the contact form link or the form, not both in both toggle states.
The code, when using Grant's revised code, is as follows:
<div id="togLink">
<?php echo $JQclick; ?>
</div>
<div id="showForm">
<?php require_once $_SERVER["DOCUMENT_ROOT"] . '/form.php'; ?>
</div>
<script>
$("#togLink").click(function() {
$("#showForm").toggle();
$("#contactForm").toggle();
});
</script>
#font-face {
font-family: 'blair_capsregular';
src: url('../.typefaces/blair_caps-webfont.woff2') format('woff2'),
url('../typefaces/blair_caps-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
#ExBox {
width: 600px;
margin: 50px auto 0 auto;
text-align: justify;
font-family: verdana, arial, sans-serif;
font-size: 11px;
line-height: 1.6;
}
.titleBar {
width:100%;
}
.Tbox {
float:left; height:25px;
text-align: center;
font-size: 15px;
font-family: 'blair_capsregular';
}
#box {
border: 2px solid blue;
margin: 0;
position: static;
padding: 0 2px 0 2px;
text-decoration: none;
}
#box a:link {
color: orange;
text-decoration: none;
}
#box a:visited {
color: orange;
text-decoration: none;
}
.Tbox:nth-child(1) {
width:33.3%;
}
.Tbox:nth-child(2) {
width:33.3%;
}
.Tbox:nth-child(3) {
width:33.3%;
}
.clearRed {
clear: both;
color: red;
}
.Tbox a:link {
color: black;
text-decoration: none;
}
.Tbox a:visited {
color: black;
text-decoration: none;
}
.Tbox a:hover {
color: red;
text-decoration: none;
}
.Tbox a:active {
color: hotpink;
text-decoration: none;
}
.Tbox a:focus {
color: hotpink;
text-decoration: none;
}
/* FORM CSS - Placeholder colors */
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color: #9b9b9b;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #9b9b9b;
opacity: 1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #9b9b9b;
opacity: 1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #9b9b9b;
}
::-ms-input-placeholder { /* Microsoft Edge */
color: #9b9b9b;
}
textarea::placeholder { color: #9b9b9b; font-family: arial; }
/* Colors for focused fields */
input[type=text], input[type=email], textarea {
outline: none;
border: 1px solid #9b9b9b;
}
input[type=text]:focus, input[type=email]:focus, textarea:focus {
border: 1px solid #00C5BE;
}
/* Input styling */
textarea {
font-family: arial;
width: 27rem;
font-size: 1rem;
padding: 0.6rem;
margin-right: 0.5rem;
margin-left: 0.5rem;
border-radius: 5px;
border: 1px solid #9b9b9b;
color: #9b9b9b !important;
}
.contact-form-div input {
display: block;
font-size: 1rem;
width: 27rem;
padding: 0.6rem;
margin: 0.5rem;
border-radius: 5px;
border: 1px solid #9b9b9b;
color: #9b9b9b !important;
}
.contact-form-div input[type=submit] {
width: auto;
background-color: #00C5BE;
border: none;
color: #fff !important;
font-size: 1em;
padding: 10px 50px;
text-transform: uppercase;
font-weight: normal;
}
/* Hide the fake field */
#m66 {
display: none;
}
/* VERTICAL SLIDER */
* { margin:0; padding:0; }
a { text-decoration: none; }
.expand {
background: #fff;
overflow: hidden;
color: #000;
line-height: 50px;
transition: all .5s ease-in-out;
height: 0;
}
.expand:target {
height: 50px;
}
.close {
max-height: 0;
}
/* JQUERY TESTING */
.box{
display:none;
}
#togLink {
color: blue;
cursor: pointer;
}
#togLink:hover {
text-decoration: underline;
}
#showForm,
#contactForm {
width: 425px;
height: 550px;
}
#showForm {
background-color: #DDD;
}
#contactForm {
background-color: #AAA;
display: none;
}
I have not added-in contactForm to the HTML side of things, because it does not fix the persistent "contact form" link and leaves an ugly background-colour box behind even when hiding the form but failing to hide the link.
...
...
26 May 2019: with reference to a reply by rg88 [ How do I hide a part of a form and make it visible only on clicking a "Add another" button? ] this is what finally worked:
<a id="togLink" href="#"><?php echo $formClick; ?></a>
<div id="togForm"><?php require_once $_SERVER["DOCUMENT_ROOT"] . '/form.php'; ?>
</div>
<script>
$( "#togLink" ).on( "click", function() {
$('#togForm').toggle();
});
</script>
#togForm {
display: none;
}
There is still the issue of not being able to make the words "Contact Form" disappear when the form is loaded or being able to replace the words with something else, but it appears that it is not possible to make this happen because the Contact Form link (in this case) is the toggle point and therefore has to remain constant in all toggle states.
You're toggling just the one element right now, given this format: $(toggled-element).toggle();. You'll need to toggle both elements like this:
$('#togLink').click(function(){
$('#showForm').toggle();
$('#contactForm').toggle();
});
If you initially want the link showing and the form hidden, you could hide the form with css with display: none;, or at the top of your html in a script with $('#showForm').hide();. So the total result would be something like this:
$("#togLink").click(function() {
$("#showForm").toggle();
$("#contactForm").toggle();
});
#togLink {
color: blue;
cursor: pointer;
}
#togLink:hover {
text-decoration: underline;
}
#showForm,
#contactForm {
width: 425px;
height: 550px;
}
#showForm {
background-color: #DDD;
}
#contactForm {
background-color: #AAA;
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="togLink">Toggle Form</div>
<div id="showForm"></div>
<div id="contactForm"></div>
Let me know if I missed something.
Changelog:
I added the #contactForm div that's not seen in OP to adjust to OP use-case requests. The clarification occurred in the comments on my answer.
Placing the PHP in an HTML element allows you to have separate control over that element:
<div id="togLink">foo
<?php echo $JQclick; ?>
</div>
<div id="showForm">bar
<span>glorp<?php require_once $_SERVER["DOCUMENT_ROOT"] . '/formInc.php'; ?></span>
</div>
Use CSS to hide the element:
span {
display: none;
}
Then avoid the element to be toggled, using .not():
$('#togLink').click(function(){
console.log('click');
$('#showForm').not('span').toggle();
});
Here is a DEMO
I need to add a corner badge for our 10th anniversary. The problem is that we're using WordPress with genesis and epik theme.
I can't add a div to the header.php on the epik (child) theme because there's not a file. The header.php is on genesis.
Does anybody knows what's the correct way to do that?
Add below code into your current theme's functions.php file.
add_action( 'wp_footer', 'addbadge' );
function addbadge(){
?><style type="text/css">
.badge{
position: fixed;
display: block;
top: 28 px;
left: -68px;
width: 257px;
z-index: 99999;
background: #990a0a ;
padding: 8px;
border-bottom: 2px solid #d2d200 ;
border-top: 2px solid #d2d200 ;
transform: rotate(-39deg);
text-align: center;
}
.badge a {
color: #fff;
font-weight: 900;
text-decoration: none;
}
</style>
<div class="badge">
Fork Me On GitHub
</div><?php
}
Hope this will helps you.
Thanks!
My WordPress theme ("Function") uses an ugly "progress bar" style ratings system which overrides the default WooCommerce star-ratings. See below:
http://demo.woothemes.com/function/shop/castillo-cap/#tab-reviews
For the life of me I can't figure out how remove this and replace it with the default/original WooCommerce star-ratings, the ones that actually look like stars (font awesome I believe?)
I believe what needs to be done is to somehow overwrite or prioritize WooCommerce star-ratings css over the theme's. Ultimately I would like for all of the progress bars (shop page & individual product pages, review submission forms) to be replaced with the default WordPress stars, however at the moment I can settle for just the shop page where the ratings (progress bars) appear under the product's photos
I was able to find the css code controlling (creating?) the progress bars in Function->Includes->Integrations->woocommerce->css->woocommerce.css However, I also found some suspicious looking code in woocommerce.less located in the same css folder.
Here is code I found in woocommerce.css:
star-rating {
width: 80px;
height: 1em;
background: #eaeaea;
-webkit-border-radius: 3.631em;
border-radius: 3.631em;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
clear: both;
}
.star-rating span {
background: #52a0cd;
height: 100%;
overflow: hidden;
float: left;
text-indent: -999em;
-webkit-box-sizing: border-box;
/* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;
/* Firefox, other Gecko */
box-sizing: border-box;
/* Opera/IE 8+ */
-webkit-border-radius: 3.631em;
border-radius: 3.631em;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
.star-rating span span {
display: none;
}
p.stars {
overflow: hidden;
zoom: 1;
}
p.stars span {
width: 80px;
height: 16px;
position: relative;
float: left;
background: #eaeaea;
-webkit-border-radius: 3.631em;
border-radius: 3.631em;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
p.stars span a {
float: left;
position: absolute;
left: 0;
top: 0;
width: 16px;
height: 0;
padding-top: 16px;
overflow: hidden;
}
p.stars span a:hover,
p.stars span a:focus {
background: #52a0cd;
-webkit-border-radius: 3.631em;
border-radius: 3.631em;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
p.stars span a.active {
background: #52a0cd;
-webkit-border-radius: 3.631em;
border-radius: 3.631em;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
p.stars span a.star-1 {
width: 16px;
z-index: 10;
-webkit-border-top-left-radius: 3.631em;
-webkit-border-bottom-left-radius: 3.631em;
border-top-left-radius: 3.631em;
border-bottom-left-radius: 3.631em;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
p.stars span a.star-2 {
width: 32px;
z-index: 9;
}
p.stars span a.star-3 {
width: 48px;
z-index: 8;
}
p.stars span a.star-4 {
width: 64px;
z-index: 7;
}
p.stars span a.star-5 {
width: 80px;
z-index: 6;
}
...and here is what I found in woocommerce.less:
// Single product
.single-product {
.summary {
.woocommerce-product-rating {
.clearfix;
.star-rating {
float: left;
margin: .327em 0 0;
}
.woocommerce-review-link {
float: right;
display: block;
}
}
// General WooCommerce
.star-rating {
width:80px;
height: 1em;
background: #border_main;
.border_radius(3.631em);
clear:both;
span {
background: #color_links;
height:100%;
overflow: hidden;
float: left;
text-indent: -999em;
.borderbox;
.border_radius(3.631em);
span {
display: none;
}
}
}
p.stars {
overflow: hidden;
zoom: 1;
span {
width: 80px;
height: 16px;
position: relative;
float: left;
background: #border_main;
.border_radius(3.631em);
a {
float: left;
position: absolute;
left: 0;
top: 0;
width: 16px;
height: 0;
padding-top: 16px;
overflow: hidden;
}
a:hover, a:focus {
background: #color_links;
.border_radius(3.631em);
}
a.active {
background: #color_links;
.border_radius(3.631em);
}
a.star-1 { width: 16px; z-index: 10; .border_radius_left(3.631em); }
a.star-2 { width: 32px; z-index: 9; }
a.star-3 { width: 48px; z-index: 8; }
a.star-4 { width: 64px; z-index: 7; }
a.star-5 { width: 80px; z-index: 6; }
}
}
...along with some more for the widget areas, reviews, etc. etc.
I've found a few posts on how to override default WooCommerce star-ratings with a Theme's, but I can't find anything on doing the reverse. I did come across this:
http://findnerd.com/list/view/How-to-show-stars-instead-of-theme-ratings-in-Woocommerce/3854/
However it didn't work for me...
Any help would be much MUCH appreciated. Thank you!
EDIT:
I was informed this might be caused by my functions.php file. Here is the code found in wp-content->themes->Function-Child->functions.php
<?php
if ( ! defined( 'ABSPATH' ) ) exit;
/*-----------------------------------------------------------------------------------*/
/* Start WooThemes Functions - Please refrain from editing this section */
/*-----------------------------------------------------------------------------------*/
// WooFramework init
require_once ( get_template_directory() . '/functions/admin-init.php' );
/*-----------------------------------------------------------------------------------*/
/* Load the theme-specific files, with support for overriding via a child theme.
/*-----------------------------------------------------------------------------------*/
$includes = array(
'includes/theme-options.php', // Options panel settings and custom settings
'includes/theme-functions.php', // Custom theme functions
'includes/theme-actions.php', // Theme actions & user defined hooks
'includes/theme-comments.php', // Custom comments/pingback loop
'includes/theme-js.php', // Load JavaScript via wp_enqueue_script
'includes/sidebar-init.php', // Initialize widgetized areas
'includes/theme-widgets.php', // Theme widgets
'includes/theme-plugin-integrations.php' // Plugin integrations
);
// Allow child themes/plugins to add widgets to be loaded.
$includes = apply_filters( 'woo_includes', $includes );
foreach ( $includes as $i ) {
locate_template( $i, true );
}
/*-----------------------------------------------------------------------------------*/
/* You can add custom functions below */
/*-----------------------------------------------------------------------------------*/
This is the exact same as the code in my regular (non-child) theme's functions.php file. I do have some custom code below this, however none of it relates to anything that would be relevant here.
EDIT 2:
OK I think I'm getting closer here!! I found this file wp-content/themes/function/includes/integrations/woocommerce/woocommerce.php which included this code at the top:
<?php
if ( ! defined( 'ABSPATH' ) ) exit;
global $woo_options;
add_theme_support( 'woocommerce' );
// Disable WooCommerce styles
if ( version_compare( WOOCOMMERCE_VERSION, '2.1' ) >= 0 ) {
// WooCommerce 2.1 or above is active
add_filter( 'woocommerce_enqueue_styles', '__return_false' );
} else {
// WooCommerce less than 2.1 is active
define( 'WOOCOMMERCE_USE_CSS', false );
}
// Load WooCommerce stylsheet
if ( ! is_admin() ) { add_action( 'wp_enqueue_scripts', 'woo_load_woocommerce_css', 20 ); }
if ( ! function_exists( 'woo_load_woocommerce_css' ) ) {
function woo_load_woocommerce_css () {
wp_register_style( 'woocommerce', esc_url( get_template_directory_uri() . '/includes/integrations/woocommerce/css/woocommerce.css' ) );
wp_enqueue_style( 'woocommerce' );
} // End woo_load_woocommerce_css()
}
When I deleted the above code, the progress bars changed a little, and in the add new review section I could actually see two blue STARS laid on top of the blank progress bar (which normally highlights blue when you scroll over to choose your rating). So it seems that removing this kinda half fixed the problem. Any further suggestions?
I need to change the color of the Navbar in Yii2 (where I have Home, About,...) how can I do this? I don't want to change the theme.
this is the site css file:
html,
body {
height: 100%;
}
.wrap {
min-height: 100%;
height: auto;
margin: 0 auto -60px;
padding: 0 0 60px;
}
.wrap > .container {
padding: 70px 15px 20px;
}
.footer {
height: 60px;
background-color: #B0C4DE;
border-top: 1px solid #ddd;
padding-top: 20px;
}
.jumbotron {
text-align: center;
background-color: transparent;
}
.jumbotron .btn {
font-size: 21px;
padding: 14px 24px;
}
.not-set {
color: #c55;
font-style: italic;
}
/* add sorting icons to gridview sort links */
a.asc:after, a.desc:after {
position: relative;
top: 1px;
display: inline-block;
font-family: 'Glyphicons Halflings';
font-style: normal;
font-weight: normal;
line-height: 1;
padding-left: 5px;
}
a.asc:after {
content: /*"\e113"*/ "\e151";
}
a.desc:after {
content: /*"\e114"*/ "\e152";
}
.sort-numerical a.asc:after {
content: "\e153";
}
.sort-numerical a.desc:after {
content: "\e154";
}
.sort-ordinal a.asc:after {
content: "\e155";
}
.sort-ordinal a.desc:after {
content: "\e156";
}
.grid-view th {
white-space: nowrap;
}
.hint-block {
display: block;
margin-top: 5px;
color: #999;
}
.error-summary {
color: #a94442;
background: #fdf7f7;
border-left: 3px solid #eed3d7;
padding: 10px 20px;
margin: 0 0 15px 0;
}
and this is the site view (index.php):
<?php
/* #var $this yii\web\View */
$this->title = 'ACME Database';
?>
<div class="site-index">
<div class="jumbotron">
<h1>Welcome to ACME Database!</h1>
</div>
<div class="body-content">
....
But I don't know where the navbar is configured. I tried editing all bootstrap.css files (navbar) but nothing changed.
If you have a look in your layout file you'll see:
NavBar::begin([
...
'options' => [
'class' => 'navbar-inverse navbar-fixed-top',
],
]);
...
If you remove navbar-inverse the navbar bg-color goes white. If you want to change the color to something else you can add my-navbar where navbar-inverse was and add
.my-navbar {
background-color: #yourcolor;
}
Don't change the bootstrap files, just add or even overwrite in your own css.
EDIT
Tips: if you use chrome developer toolbar (or someting similar) you can just hover the elements and see what class they are styled with, and then overwrite the class in your own css.
o css no caminho /www/moodle/theme/mytheme/style : custom.css
/* Custom CSS
-------------------------*/
body {
background: url([[pix:theme|bg]]) repeat scroll 0 0 rgba(0, 0, 0, 0);
padding-top: 60px;
color: #58585A;
font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
line-height: 20px;
margin: 0;
}
#page {
padding-top: 47px;
}
a.logo {
background: url([[setting:logo]]) no-repeat 0 0;
display: block;
float: left;
height: 75px;
margin: 0;
padding: 0;
width: 100%;
}
.dir-rtl a.logo {
background: url([[setting:logo]]) no-repeat 100% 0;
display: block;
float: right;
}
.navbar-inner{
background: #F5F5F5;
}
.navbar .navbar-inner a.brand span {
display: none;
}
.navbar .navbar-inner a.brand {
background-image: url([[pix:theme|logo]]);
background-position: center center;
background-repeat: no-repeat;
min-height: 74px;
padding: 5px 20px;
width: 214px;
}
.navbar .nav {
margin-top: 17px;
}
.navbar-text, .navbar .nav > li > a{color:#E8770D;}
.breadcrumb {
border-radius: 4px;
list-style: none outside none;
margin: 0 0 20px;
padding: 8px 15px;
background-color: #FFFFFF;
border: 1px solid #E0E0E0;
}
.coursebox {
border: 1px dotted #DDDDDD;
border-radius: 4px;
margin-bottom: 15px;
padding: 5px;
background:#f5f5f5;
}
/* Custom CSS Settings
-------------------------*/
[[setting:customcss]]
Moodle puts all the css into one file for speed. To turn this off, add this line to config.php - on a development site not a production site...
$CFG->themedesignermode = true;
Then in Chrome, refresh the page, right click on the block and inspect element. It should now show the original css file.
After you have finished, remove the themedesignermode line or set it to false because it will make the site verrrry slow... http://docs.moodle.org/dev/Creating_a_theme#Theme_designer_mode
You might also need to purge the cache after making any changes - http://docs.moodle.org/26/en/Purge_all_cache