so this is the CSS:
.header-inner {
background: url(../images/inner_bg.png), linear-gradient(108deg, #001a30, rgba(0, 0, 0, 0)) no-repeat;
}
i want to inline it to make the background a dynamic value with the blade syntax later on, this is what i did but its not showing the image properly:
<div class="header-inner hi-about-us mb-0" style="background: url({{ asset('test-images/inner_bg.png') }}) linear-gradient(108deg, #001a30, rgba(0, 0, 0, 0)) no-repeat">
The correct code should be like this:
<div class="header-inner hi-about-us mb-0" style="background: url('{{ asset('test-images/inner_bg.png') }}') linear-gradient(108deg, #001a30, rgba(0, 0, 0, 0)) no-repeat">
The URL should be inside single quotes.
You can also try this:
#php
$bgUrl = asset('test-images/inner_bg.png');
#endphp
<div class="header-inner hi-about-us mb-0" style="background: url('{{ $bgUrl }}') linear-gradient(108deg, #001a30, rgba(0, 0, 0, 0)) no-repeat">
You can try this:
style="background: url('{{ asset('test-images/inner_bg.png') }}')
Related
i want to do the following thing with inline styles:
<div style="color: #00FC0056;">
<h1 style="color: rgba(255, 0, 0, inherit);">Hello, world!</h1>
</div>
I want the alpha value of the color to be inherit.
Is it possible, and if so how can I do this?
You can use CSS vars
<div style="--alpha:.56">
<h1 style="color: rgba(255,0,0, var(--alpha))">Hello, world!</h1>
</div>
I have a navbar with 3 levels, second level has a color code that correspond to his respective third level
What I'm trying to achieve is when a level is clicked, the background color of the level change to it's left border color ( For example "Réseau" bg should be full blue ) but I can't make it work properly since the levels are rendered with an NgFor* and the color is a variable coming from a switch() function.
If someone could lead me on what I'm doing wrong there I'd really appreciate it. Been trying NgStyle and NgClass but no success yet.
navbar.html
<div class="w-100 text-nowrap">
<nav class="nav nav-tabs w-25 flex-column flex-sm-row reduceHeight40 mainNav">
<input type="submit"
[value]="label_name[first]"
checked
[style.borderColor]="getColors(first)"
class="flex-sm-fill border-top-0 border-right-0 text-nowrap border-left-0 text-sm-center nav-link alu hovAlu"
*ngFor="let first of firstLevel"
(click)="dynamicFilter1(first); ">
</nav>
<div class="container alu dpf navbar-light">
<div class="nav nav-tabs flex-column text-nowrap thirdColor flex-sm-row navbar-light" >
<input [value]="label_name[second]" type="submit"
*ngFor="let second of dynamicLevels1; let index2 = index"
(click)="dynamicFilter2(second);selectedItem = index2;selectedItem2 = null"
[style.borderLeftColor]="getColors(second)"
[ngClass]="{'active': selectedItem === index2}"
class="flex-sm-fill ml-2 reduceHeight25 wdt10 text-sm-center nav-link"
>
</div>
</div>
<div class="container alu dpf navbar-light" *ngIf="ShowImage === false">
<div class="w-100">
<nav *ngIf="ShowTemplate"
class="nav nav-tabs d-flex flex-column ml-1 level3 flex-sm-row navbar-light " >
<input type="button" [value]="label_name[(third)]"
[style.borderColor]="getColors(third)"
class="flex-sm-fill text-nowrap reduceHeight25 smallText border-top-0 border-right-0 borderless border-left-0 wdt10 text-sm-center nav-link"
(click)="dynamicFilter3(third);selectedItem2 = index3"
[ngClass]="{'active': selectedItem2 === index3}"
*ngFor="let third of dynamicLevels2;let index3 = index">
</nav>
</div>
</div>
</div>
switch function
colors: any;
getColors(color) {
this.colors = color;
switch (color) {
case(1):
return 'rgb(0, 118, 172)';
case(2):
case(3):
case(4):
return 'rgb(0, 118, 172)';
case(5):
case(6):
case(7):
return 'rgb(255,185,29)';
case(8):
return 'rgb(3,160,128)';
case(9):
case(10):
case(11):
case(12):
return 'rgb(169,169,169)';
}
}
If you need more code tell me and I'll add it.
Thank's in advance for the help !
I honestly would leave style properties to style sheets alone.
That has several advantages, just to mention some:
let's you easily include colors from defined style guides, which greater business projects usually have
could be reused with mixins
doesn't run into many function calls (https://medium.com/showpad-engineering/why-you-should-never-use-function-calls-in-angular-template-expressions-e1a50f9c0496)
doesn't let you make syntax error, since your switch-case could return any invalid string
Have an example here:
scss:
$colors-map: (
'1': rgb(0, 118, 172),
'2': rgb(0, 118, 172),
'3': rgb(0, 118, 172),
'4': rgb(0, 118, 172),
'5': rgb(255, 185, 29),
'6': rgb(255, 185, 29),
'7': rgb(255, 185, 29),
'8': rgb(3, 160, 128),
'9': rgb(169, 169, 169),
'10': rgb(169, 169, 169),
'11': rgb(169, 169, 169),
'12': rgb(169, 169, 169)
);
#each $c in map-keys($colors-map) {
.color-#{$c} {
border-left: 5px solid map-get($colors-map, $c);
&.selected {
background-color: map-get($colors-map, $c);
}
}
}
html:
<ng-container *ngFor="let x of [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]">
<div class="color-{{x}}" [ngClass]="{selected: x === selectedX}" (click)="selectedX = x">
I am element {{ x }}!
</div>
</ng-container>
See stackblitz:
https://stackblitz.com/edit/angular-ivy-thypkb?file=src/app/app.component.ts
I am currently creating a child theme for my website which uses genesis as a parent theme.
Now i am making single pages as per my choosing.
So, I am removing the entry header from within html main and posting it after entry-header.
my code looks like this.
remove_action( 'genesis_entry_header', 'genesis_do_post_title' );
remove_action( 'genesis_entry_header', 'genesis_post_info', 12 );
add_action( 'genesis_after_header', 'gp_page_header');
function gp_page_header(){
$image = wp_get_attachment_image_src( get_post_thumbnail_id( get_the_ID() ), 'single-post-thumbnail' );
?>
<div class="post-hero" style="background-repeat: no-repeat;background-size:cover;background-image: -webkit-radial-gradient(left top, circle cover, rgba(100, 66, 255, 0.9) 15%, rgba(0, 108, 255, 0.9) 50%, rgba(12, 180, 206, 0.9) 85%), url('<?php echo $image[0]; ?>')">
<div class="wrap">
<?php
the_title( '<h1 class="entry-title" itemprop="headline">', '</h1>' );
genesis_post_info();
?>
</div>
</div>
<?php
}
If didn't want to create this style for homepage and should be only applied to single pages.
Here is what i am doing now.
remove_action( 'genesis_entry_header', 'genesis_do_post_title' );
remove_action( 'genesis_entry_header', 'genesis_post_info', 12 );
if(is_single()) {
add_action( 'genesis_after_header', 'gp_page_header');
function gp_page_header(){
$image = wp_get_attachment_image_src( get_post_thumbnail_id( get_the_ID() ), 'single-post-thumbnail' );
?>
<div class="post-hero" style="background-repeat: no-repeat;background-size:cover;background-image: -webkit-radial-gradient(left top, circle cover, rgba(100, 66, 255, 0.9) 15%, rgba(0, 108, 255, 0.9) 50%, rgba(12, 180, 206, 0.9) 85%), url('<?php echo $image[0]; ?>')">
<div class="wrap">
<?php
the_title( '<h1 class="entry-title" itemprop="headline">', '</h1>' );
genesis_post_info();
?>
</div>
</div>
<?php
}
}
But this way it doesn't work. If i use conditional tag, it isn't working.
I am confused at the moment.
Also, I am using front-page.php as template for home.
Any help will be appreciated. Thanks
Looks like you have the conditional tag in the wrong place. Needs to be added after the function like this :
add_action( 'genesis_after_header', 'gp_page_header');
function gp_page_header(){
if ( is_singular( 'post' ) ) {
remove_action( 'genesis_entry_header', 'genesis_do_post_title' );
remove_action( 'genesis_entry_header', 'genesis_post_info', 12 );
$image = wp_get_attachment_image_src( get_post_thumbnail_id( get_the_ID() ), 'single-post-thumbnail' );
?>
<div class="post-hero" style="background-repeat: no-repeat;background-size:cover;background-image: -webkit-radial-gradient(left top, circle cover, rgba(100, 66, 255, 0.9) 15%, rgba(0, 108, 255, 0.9) 50%, rgba(12, 180, 206, 0.9) 85%), url('<?php echo $image[0]; ?>')">
<div class="wrap">
<?php
the_title( '<h1 class="entry-title" itemprop="headline">', '</h1>' );
genesis_post_info();
?>
</div>
</div>
<?php
}
}
Based on my testing, your code needs some work.
I have a web app that displays an SVG timeline. The SVG is using a ViewBox to properly scale the timeline as the browser page grows/shrinks.
The SVG timeline properly appears in firefox/chrome etc. It also properly appears in chrome when I print to pdf straight from chrome.
WORKS IN FIREFOX AND CHROME BUT NOT IN PHANTOMJS...
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="overflow: hidden; position: relative; left: 0px;" data-hasqtip="26" viewBox="0 0 1138 130" aria-describedby="qtip-26">
When I print to pdf using phantomjs however, the SVG timeline does not appear at all. If instead of using a viewBox, I use fixed width and height for the SVG timeline, it does properly show up in the phantomjs pdf.
WORKS IN PHANTOMJS...
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="overflow: hidden; position: relative; left: 0px;" data-hasqtip="26" width="1100" height="900" aria-describedby="qtip-26">
Does anyone have any insight/heads up in terms of why this is occurring? Have stackoverflowed, googled the issue but nothing specific
Thanks in advance for any help
David
ccprog,
per your kind request, below is the enclosing html etc. viewBox="0 0 718 130" below works in chrome/FF, does not work in phantomjs
Thanks fot any heads up/help in advance
<!DOCTYPE html><!--[if lt IE 7]>
<html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--><!--[if IE 7]>
<html class="no-js lt-ie9 lt-ie8"> <![endif]--><!--[if IE 8]>
<html class="no-js lt-ie9"> <![endif]--><!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]--><head><style type="text/css">#charset "UTF-8";[ng\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide{display:none !important;}ng\:form{display:block;}.ng-animate-block-transitions{transition:0s all!important;-webkit-transition:0s all!important;}.ng-hide-add-active,.ng-hide-remove{display:block!important;}</style>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Objective Arts</title>
<meta name="viewport" content="width=device-width">
<!-- iOS -->
<link rel="apple-touch-icon" href="public/images/logo-white.png">
<!--<link rel="apple-touch-startup-image" href="/startup.png">-->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<!-- Android -->
<meta name="mobile-web-app-capable" content="yes">
<link rel="shortcut icon" sizes="196x196" href="images/logo-white.png">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css styles/vendor.css -->
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="bower_components/angular-motion/dist/angular-motion.css">
<link rel="stylesheet" href="bower_components/bootstrap-switch/dist/css/bootstrap3/bootstrap-switch.css">
<link rel="stylesheet" href="bower_components/angular-xeditable/dist/css/xeditable.css">
<link rel="stylesheet" href="bower_components/bootstrap-additions/dist/bootstrap-additions.min.css">
<link rel="stylesheet" href="bower_components/angular-growl-v2/build/angular-growl.css">
<link rel="stylesheet" href="bower_components/c3/c3.css">
<!-- endbower -->
<!-- endbuild -->
<!-- build:css({.tmp,app}) styles/main.css -->
<link rel="stylesheet" href="styles/app.css">
<link rel="stylesheet" href="styles/navbar.css">
<link rel="stylesheet" href="styles/cfsPrint.css">
<link rel="stylesheet" href="styles/assessmentNavigator.css">
<link rel="stylesheet" href="styles/assessmentValidations.css">
<link rel="stylesheet" href="styles/plan.css">
<link rel="stylesheet" href="styles/abn_tree.css">
<link rel="stylesheet" href="styles/flags.css">
<link rel="stylesheet" href="styles/chronoline.css">
<link rel="stylesheet" href="bower_components/qtip2/jquery.qtip.min.css">
<!-- endbuild -->
<style type="text/css"></style></head>
<body ng-app="oaClientJs" style="" class="ng-scope">
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser
to improve your experience.</p>
<![endif]-->
<div full-screen-loader="" class="ng-isolate-scope"><div id="fullscreenloaderoverlay" style="zoom: 1;" ng-show="visible" class="ng-hide">
</div>
<div id="fullscreenloadermessage" class="panel panel-default ng-hide" ng-show="visible">
<div class="panel-body">
<div class="text-centered">
<h5 class="ng-binding">Loading Form<img src="images/loader.gif"></h5>
</div>
</div>
</div></div>
<div growl="" class="ng-isolate-scope"><div class="growl-container growl-fixed top-right" ng-class="wrapperClasses()"><!-- ngRepeat: message in growlMessages.directives[referenceId].messages --></div></div>
<!-- AngularJS controlled views -->
<div class="container fill">
<!-- ngView: --><div ng-view="" class="fill ng-scope"><style xmlns:page-break-inside="http://www.w3.org/1999/xhtml" class="ng-scope">
.narrative {
zoom: 0.8;
}
.nopadding {
padding: 0 !important;
margin: 0 !important;
}
.strength {
background-color: #a0b2be !important;
border: 1px solid #ddd !important;
-webkit-print-color-adjust: exact;
}
.three {
background-color: #be969c !important;
border: 1px solid #ddd !important;
-webkit-print-color-adjust: exact;
}
.two {
background-color: #fae190 !important;
border: 1px solid #ddd !important;
-webkit-print-color-adjust: exact;
}
.one {
background-color: #7abe77 !important;
border: 1px solid #ddd !important;
-webkit-print-color-adjust: exact;
}
.note {
font-style: italic;
font-size: 10px;
}
.date {
font-style: italic;
font-size: 10px;
border: 1px solid lightgrey;
-webkit-print-color-adjust: exact;
align-content: center;
}
.unbreakable {
display: inline-block;
}
.centered {
text-align: center;
}
.sphere {
height: 10px;
width: 10px;
border-radius: 50%;
vertical-align: middle;
display: inline-block;
border: 1px solid black;
}
.printOnly{
display:none;
}
#media print {
html {
zoom: .7;
}
.printOnly{
display:block;
}
}
</style>
<!-- <test> start of form panel -->
<div id="detailHideContent" class="row hidden-print ng-scope">
<div id="realContent" class="panel panel-info">
<div class="panel-heading"><span class="glyphicon glyphicon-list-alt"></span> <b class="ng-binding">Form - ....</b>
</div>
<div class="panel-body">
<div class="row">
<div class="col-md-2 col-sm-3 col-xs-6"><b>...:</b></div>
<div class="col-md-3 col-sm-3 col-xs-6 ng-binding">ID10006</div>
<div class="col-md-2 col-sm-3 col-xs-6"><b>....:</b></div>
<div class="col-md-5 col-sm-3 col-xs-6 ng-binding">....</div>
</div>
<div class="row">
<div class="col-md-2 col-sm-3 col-xs-6"><b>...</b></div>
<div class="col-md-3 col-sm-3 col-xs-6"><a ng-href="#/clientTab/10006" class="ng-binding" href="#/clientTab/10006">....</a></div>
<div class="col-md-2 col-sm-3 col-xs-6"><b>...</b></div>
<div class="col-md-5 col-sm-3 col-xs-6 ng-binding">...</div>
</div>
<div class="row top-buffer">
<div class="col-md-2 col-sm-3 col-xs-6"><b>...</b></div>
<div class="col-md-3 col-sm-3 col-xs-6 ng-binding">12</div>
</div>
<div class="row">
<div class="col-md-2 col-sm-3 col-xs-6"><b>...</b></div>
<div class="col-md-5 col-sm-3 col-xs-6">
<!-- ngIf: !isEditMode --><span ng-if="!isEditMode" class="ng-binding ng-scope">...</span><!-- end ngIf: !isEditMode -->
<!-- ngIf: isEditMode -->
<!-- ngIf: isEditMode -->
</div>
</div>
<div class="row">
<div class="col-md-2 col-sm-3 col-xs-6"><b>Org Unit:</b></div>
<div class="col-md-10 col-sm-9 col-xs-6">
<span ng-show="isEditMode && availableOus.length == 0" class="ng-hide">No placements exist for the specified time range</span>
<span ng-show="!isEditMode || availableOus.length == 1" class="ng-binding">WEFC - EIIS (36EWEI)</span>
<select ng-show="isEditMode && availableOus.length > 1" class="form-control ng-pristine ng-valid ng-hide" ng-options="placement.nameCode for placement in availableOus track by placement.id" ng-model="selected.orgUnit"><option value="140" selected="selected">...</option></select>
</div>
</div>
<div class="row ng-hide" ng-show="isEditMode && regenerateRequired()">
<div class="col-md-2 col-sm-3 col-xs-6"> </div>
<div class="col-md-10 col-sm-9 col-xs-6">
<span>Regenration is required</span>
</div>
</div>
</div>
</div>
</div> <!-- end <div id="detailHideContent" class="row hidden-print"> -->
<!-- END OF FORM PANEL -->
<!-- START OF COURSE OF CARE PANEL -->
<div id="detailHideContent" class="row ng-scope">
<div id="formDetails" class="panel panel-default" ng-show="showDetails()">
<div class="panel-heading"><span class="glyphicon"></span> <b>...</b>
</div>
<div class="panel-body">
<div class="timeline-tgt ng-isolate-scope" reactive-chrono-line=""
chrono-data="chronoline"><div class="chronoline-wrapper
chronoline-draggable"><div class="chronoline-canvas" style=""><svg version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
data-hasqtip="7" viewBox="0 0 718 130" style="overflow: hidden; position:
relative; left: 0px;"><desc style="-webkit-tap-highlight-color: rgba(0, 0, 0,
0);">Created with Raphaël 2.2.0</desc><defs style="-webkit-tap-highlight-color:
rgba(0, 0, 0, 0);"></defs><circle cx="493.62499999999994" cy="73.5" r="2.5"
fill="#87ceeb" stroke="#87ceeb" stroke-width="2" class="chronoline-event"
style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"><title
style="-webkit-tap-highlight-color: rgba(0, 0, 0,
0);">Assessment</title></circle><circle cx="508.5833333333333" cy="73.5" r="2.5"
fill="#87ceeb" stroke="#87ceeb" stroke-width="2" class="chronoline-event"
style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"><title
style="-webkit-tap-highlight-color: rgba(0, 0, 0,
0);">...</title></circle><circle cx="519.2678571428571" cy="73.5" r="2.5"
fill="#87ceeb" stroke="#87ceeb" stroke-width="2" class="chronoline-event"
style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"><title
style="-webkit-tap-highlight-color: rgba(0, 0, 0,
0);">...</title></circle><circle cx="534.2261904761905" cy="73.5" r="2.5"
fill="#00ffff" stroke="#00ffff" stroke-width="2" class="chronoline-event"
style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"><title
style="-webkit-tap-highlight-color: rgba(0, 0, 0,
0);">Collateral</title></circle><circle cx="549.1845238095237" cy="73.5" r="2.5"
fill="#ff0000" stroke="#ff0000" stroke-width="2" class="chronoline-event"
style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"><title
style="-webkit-tap-highlight-color: rgba(0, 0, 0,
0);">...</title></circle><circle cx="564.1428571428571" cy="73.5" r="2.5"
fill="#ff0000" stroke="#ff0000" stroke-width="2" class="chronoline-event"
style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"><title
style="-webkit-tap-highlight-color: rgba(0, 0, 0,
0);">...</title></circle><circle cx="579.1011904761905" cy="73.5" r="2.5"
fill="#87ceeb" stroke="#87ceeb" stroke-width="2" class="chronoline-event"
style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"><title
style="-webkit-tap-highlight-color: rgba(0, 0, 0,
0);">...</title></circle><circle cx="534.2261904761905" cy="64.5" r="2.5"
fill="#006400" stroke="#006400" stroke-width="2" class="chronoline-event"
style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"><title
style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Plan Dev -
MHS</title></circle><path fill="none" stroke="#b8b8b8" d="M0,80L718,80"
style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path><text x="15"
y="118" text-anchor="middle" font-family=""Arial"" font-size="10px"
stroke="none" fill="#000000" font-weight="bold"
style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: middle;
font-family: Arial; font-size: 10px; font-weight: bold;"><tspan dy="3.5"
style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">2017</tspan></text><path
fill="none" stroke="#b8b8b8" d="M-36.32738095238095,80L-36.32738095238095,84"
style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path><text
x="-36.32738095238095" y="94" text-anchor="middle"
font-family=""Arial"" font-size="10px" stroke="none" fill="#000000"
style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: middle;
font-family: Arial; font-size: 10px;"><tspan dy="3.5"
style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">01</tspan></text><text
x="15" y="106" text-anchor="middle" font-family=""Arial""
font-size="10px" stroke="none" fill="#000000" font-weight="bold"
style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: middle;
font-family: Arial; font-size: 10px; font-weight: bold;"><tspan dy="3.5"
style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">JAN</tspan></text><path
fill="none" stroke="#b8b8b8" d="M-6.410714285714286,80L-6.410714285714286,84"
style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path><text
x="-6.410714285714286" y="94" text-anchor="middle"
font-family=""Arial"" font-size="10px" stroke="none" fill="#000000"
style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: middle;
font-family: Arial; font-size: 10px;"><tspan dy="3.5"
style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">15</tspan></text><path
fill="none" stroke="#b8b8b8" d="M29.916666666666664,80L29.916666666666664,84"
style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path><text
x="29.916666666666664" y="94" text-anchor="middle"
font-family=""Arial"" font-size="10px" stroke="none" fill="#000000"
style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: middle;
font-family: Arial; font-size: 10px;"><tspan dy="3.5"
style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">01</tspan></text><text
x="29.916666666666664" y="106" text-anchor="middle"
font-family=""Arial"" font-size="10px" stroke="none" fill="#000000"
font-weight="bold" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
text-anchor: middle; font-family: Arial; font-size: 10px; font-weight:
bold;"><tspan dy="3.5" style="-webkit-tap-highlight-color: rgba(0, 0, 0,
0);">FEB</tspan></text><path fill="none" stroke="#b8b8b8"
d="M59.83333333333333,80L59.83333333333333,84"
style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path>
<text
x="707.3154761904761" y="94" text-anchor="middle"
font-family=""Arial"" font-size="10px" stroke="none" fill="#000000"
style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: middle;
font-family: Arial; font-size: 10px;"><tspan dy="3.5"
style="-webkit-tap-highlight-color: rgba(0, 0, 0,
0);">15</tspan></text></svg>
</div><div class="chronoline-left"
style="margin-top: 40px; height: 40px; display: none;"><div
class="chronoline-left-icon" style="margin-top: 12.5px;"></div></div><div
class="chronoline-right" style="margin-top: 40px; height: 40px; display:
none;"><div class="chronoline-right-icon" style="margin-top:
12.5px;"></div></div></div></div>
svg ELEMENT IN CHROME/FF USING viewBox
svg ELEMENT IN PHANTOMJS USING same viewBox
Been trying to change the dropdown arrow in the topbar of Foundation 6 but no luck with this forum answer.
I do not see those classes in my Foundation 6, so what I did was:
.top-bar .is-dropdown-submenu-parent > a:after {
border-color: #FF0000 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
}
But still has not change.
HTML (ruby):
<div class="top-bar">
<div class="top-bar-left">
<ul class="dropdown menu" data-dropdown-menu>
<li class="menu-text">
<%= image_tag('logo.png', size: '40x40') %>
</li>
<li>
Dashboard
</li>
<li>
Accounts
<ul class="menu vertical">
<li><%= link_to 'Sales', sales_path %></li>
<li><%= link_to 'Inventory', inventory_path %></li>
</ul>
</li>
<li><%= link_to 'Settings', settings_path %></li>
</ul>
</div>
</div>
Please use this:-
.top-bar .is-dropdown-submenu-parent > a:after {
border-color: #FF0000 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0)!important;
}
I see you use scss, so you can configure foundation variables to change components view. Here is the list of all available variables. Change $dropdownmenu-arrow-color to set new color to arrow.
It's due CSS Specificity. The "default" Foundaiton selector is
.dropdown.menu > li.is-dropdown-submenu-parent > a::after{}
Notice the first part of the selector, it uses two classes - .dropdown and .menu while your selector uses only .top-bar. And on the second part the li selector is also used. Compare those two CSS selectors with this CSS specificity calculator.
So, use that selector:
.dropdown.menu > li.is-dropdown-submenu-parent > a::after{
border-color: #FF0000 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
}
Or you can use !important.