I am just starting off with PHP, I want to separate css file nicely and link them to the page that I needed them and here is the card component and since I am just starting off, the codebase is very small and easy to debug when problem comes but I just could not figure out where went wrong.
// /components/item-card/item_card.php
<?php
<link rel="stylesheet" type="text/css" href="/css/variables.css" />
<link rel="stylesheet" type="text/css" href="/components/item-card/item_card.css" />
<div class="item-card">
<div></div>
<div></div>
<div>
<button>ADD TO CART</button>
</div>
</div>
?>
// /css/variables.css
:root {
--main-color-scheme: #182e49;
}
// /components/item-card/item_card.css
:root {
--card-width: 300px;
--card-height: 360px;
}
.item-card {
display: flex;
width: var( --card-width );
height: var( --card-height );
}
// /index.php
<?php
include "components/item-card/item_card.php";
?>
The just above just me trying to create a item card component simply, I tried to move all the code inside item_card.css to variables.css and it works normally, but why does it not work when the code is inside item_card.css ? I also inspect the element and see the file loaded normally, I could click on it and to see the code also, but inside the resource tab, I could only see variables.css loaded.
Edit for more info: The server I am running on was the php built in server and my project was put within ~/projects/...
Edit: Somehow the php only loaded the first css and it only loaded one css only, also it only load from /css but not /components/item-card/item_card.css
Firstly check your item_card.css file path is correct or not.
CSS custom properties work throughout one document. So, define the variables in item_card.css or #import the variables.css at the beginning of item_card.css file.
Related
I am working on a project where i am allowing the user to change theme settings i.e colors, design etc from Admin Panel. I want the user to just enter the color hex code and that will change the linked properties in the view. What i tried to do is
In the view:
<style>
button.submitform:hover, button.submitform:focus{
background: {{ $customizer->global_lite_colorcode}} !important;
}
</style>
This solution work perfect but it has to be inline or in the html file, but i want to use externel css file.And this style i.e button.submitform lives in external css file called main.css . I want the laravel variable to change that property in there. How can i do this ?
I don't think that your css file main.css can parse notation of Laravel {{}}. Of course, if you must style pseudo classes like hover or focus, I have an idea about this, I think you can set a fixed style firstly:
button.submitform__red:hover, button.submitform__red:focus{
background: red !important;
}
And dynamically bind style with {{}} like this:
<button>
<div class="submitform__{{$customizer->global_lite_colorcode}}" />
</button>
js way:
document.querySelectorAll('.submitform__{{$customizer->global_lite_colorcode}}')[0].style['background'] = '{{$customizer->global_lite_colorcode}}';
Since you are dealing with a User (who is probably logged-in), you can very easily create CSS Styles based on the User-id and then load the style Dynamically in the view based on which user is logged-in.
STEP 1: USING USER ID TO CREATE A CSS FILE
<?php
// THIS IS AN ACTION IN YOUR CONTROLLER THAT HANDLES THE PROCESSING OF THE
// USER-SETTINGS FORM...
public function saveUserSetting(Request $request){
// OBTAIN THE $userID YOUR WAY...
$userDataPath = __DIR__ . "/../../../public/css/user_data";
// BUILD THE CSS TO BE ADDED TO USERS CUSTOM CSS FILE
// BASED ON HIS SETTINGS...
// $customizer = //<== GET THE $customizer OBJECT
$css = "button.submitform:hover, button.submitform:focus\{\n";
$css .= "background: " . $customizer->global_lite_colorcode . " !important;\n";
$css .= "\}\n"
// IF USER-SPECIFIC CSS FILE DOES NOT EXIST, WE CREATE IT,
// OTHERWISE WE JUST GET ITS CONTENT AND APPEND NEW STYLES TO IT..
if(!file_exists($userDataPath . "/user_{$userID}.css")){
file_put_contents($userDataPath . "/user_{$userID}.css", $css);
}else{
$data = file_get_contents($userDataPath . "/user_{$userID}.css");
if(!stristr($data, $css) ){$data.= $css;}
file_put_contents($userDataPath . "/user_{$userID}.css", $data);
}
// DO OTHER THINGS...
}
Then on the View, make sure you have created a section called "stylesheets" (for example) in your Master-File (That is; if you are using Template inheritance). Your Main Layout File would contain something like below within the < head > section.
#yield("stylesheets")
Then on the actual View File, you can dynamically add the User's Custom Style-Sheet based on the ID of the logged-in User like so:
#extends('layouts.app')
#section('stylesheets')
<link type="text/css" rel="stylesheet" media="all" href="{{ URL::asset('css/bootstrap.min.css') }}" />
<!-- THIS WILL LOAD ONLY THE USER'S CUSTOM CSS -->
<link type="text/css" rel="stylesheet" media="all" href="{{ URL::asset('css/user_data/user_' . $userID . ".css") }}" />
#endsection
However; it is important to note that in this approach, the data has to first be saved and written to File before you can see any changes... you wouldn't have an instant response of seeing your style applied immediately. If you need such Functionality, you may consider integrating Javascript.
Another way would be to gather all the Front-End Settings that the User specified in the Form, and store them as part of the users Table like under the column_name settings in either serialized or json_encoded format. This means that, once you fetch the Logged-in User Information, you can generate a CSS using the information stored in the settings....
This for sure can be done in an external file, but it won't be an external .css file; it will be a .blade.php file that contains any css styling, similar to the way you're doing it above. The issue is that since the property global_lite_colorcode is attached to a php variable $customizer, it cannot be parsed in a plain .css file.
On your view file, include a <style> tag the same way you are currently doing, and use the #include() blade command to pull in an external php file:
<style>
#include("views.custom.themes")
</style>
Specify a valid path to a .blade.php file using . notation, and in that file, include your "pseudo-inline" css:
button.submitform:hover, button.submitform:focus {
background: {{ $customizer->global_lite_colorcode}} !important;
}
<!-- Any other style tags that rely on php variables -->
As long as $customizer is accessible in the view file that calls the #include function, the code in the included file can also access it.
This is a bit of workaround to using an external .css file, but should work for your needs.
I have two files, one is a php file where a session is set, the source is included below.
An .htaccess file is in place to make sure css will be parsed like a php file,
I have verified that this works, but no session data can be read from style2.css
index.php:
<?php
session_start();
$_SESSION['bgimg'] = 'picture.jpg';
?>
<head>
<meta charset="utf-8">
<title>Index</title>
<link rel="stylesheet" type="text/css" href="style2.css">
</head>
....
the other is style2.css:
<?php
session_start();
header("Content-type: text/css; charset: UTF-8");
print_r($_SESSION);
?>
body {
background: #fff;
background-image: url("<?php echo $_SESSION['bgimg']; ?>");
}
....
I think your session cookie might not be sent along with .css requests, so the session cannot be fetched.
css will be parsed like a php file,
This is a terrible idea!
Instead use mod_rewrite to rewrite style2.css to a PHP script
RewriteRule ^style2\.css$ generate_style.php
Other than that your session code looks fine, maybe PHP is just confused about the .css file.
In general, passing css files though the php interpreter is not the best idea.
Css is meant to be static, cached data with styling information.
As it seems that you want to dynamically set a background image of one specific element, I suggest using the style attribute in html like so:
<body style="background-image:url(<?= /* php code here */ ?>);"></body>
If, on the other hand, you want to change styling based for example on your login status, I suggest using html class attributes as flags and using the class selector in css:
Example CSS:
p {
/* formatting without login */
}
.login p {
/* formatting with login */
}
Example php
<!-- snip -->
<body <? if(/* check login here */) { echo 'class="login"'}?> >
<!-- snip -->
I have included a _construct() function into my BaseController to include CSS and Javascript using the Asset::add command. However, the CSS doesn't seem to be loading in. The view is loading correctly (so I know there are no errors or exceptions being thrown), but the CSS is not being applied.
For one view, I have:
<html>
<body>
<div class="banner-image"></div>
</body>
</html>
In the CSS, banner-image is defined as:
.banner-image{background:transparent url(/assets/images/hires_080820-F-5957S-987c.jpg) no-repeat center center;-webkit-background-size:cover;-moz-background-size:cover;background-size:cover; height:800px; min-width: 1200px;}
I have the assets folder inside my public folder.
However, the image is not loading on the page (the page remains blank). Any ideas why this would be happening?
Have you dumped the assets in the header anywhere??
like this...
<head>
{{Asset::styles();}}
</head>
But I think that only works with Laravel 3....
It is my understanding that assets are called differently in L4
Anyway....
I just echo them directly into my header views...Like so...
echo asset('css/yourcssfile.css');
or, if you're using Blade templating..
{{asset('css/yourcssfile.css')}}
Also...assuming your css folder is directly in the public folder like public/css
Then the path to your image background would change to this...
.banner-image{background:transparent url('../assets/images/hires_080820-F-5957S-987c.jpg') no-repeat center center;-webkit-background-size:cover;-moz-background-size:cover;background-size:cover; height:800px; min-width: 1200px;}
Because you need to get out of the css folder, so you apply ../
Also it's good to put single quotes around paths
Place the css and js files in the public folder, then load in them as the name.blade.php files are in the public folder too.
In my css
div.image {
width:<?php echo get_image_size( $size[1] ); ?>px;
}
The size is stored in an array so i called $size[1] to here...
I am beginner in php...
any one pls help?
Better solution is to set a header for the css / php file in my example cssfile.php:
<?php header("Content-type: text/css"); ?>
Then you can use the php file as style.
<link rel="stylesheet" type="text/css" href="cssfile.php?param=1" />
Then you should get the output on your site. But with that solution you should be very careful if you have a lot of traffic. On every site call your PHP interpreter is used to deliver that file.
Yes for this particular instance if you just need php on this one line it is best to insert in the head of your html instead of having php make a whole css file for you.
<style type="text/css">
div.image {
width:<?php echo get_image_size( $size[1] ); ?>px;
}
</style>
PHP should NOT be creating your static assets unless absolutely necessary. You will notice performance hit if traffic gets high.
Change the extension to .php and then in your stylesheet put:
<?php header("Content-type: text/css"); ?>
Then you can use PHP inside your stylesheet.
Maybe you should use this:
<div class="image">
<img src="image.gif" />
</div>
CSS:
div.image img{
width: 100%
}
The problem with putting style inside html is that everything get messed. You should try to separate html from css and js as much as possible.
Also, from my expirience, this is not a good practice to use php in css or js files.
Consider reviewing your html layout to optimize this.
One way is to move that particular piece out of the .css file, and insert it in a PHP document that has access to the get_image_size() function. For example, you may have a template that is parsed as the header. You could then surround this piece in <style> tags.
For that you need to use like this
change your css file as css.php, and use stylesheet include like this
<link rel="stylesheet" type="text/css" href="css.php?opt1=<?php echo get_image_size($size[1] ); ?>" />
In css.php file
div.image {
width:<?php echo $_GET['opt1']; ?>px;
}
try this
I have a (probably not) unique issue with a css background div I am seeking advice on. I am using Wordpress, which creates my pages dynamically. The front page and some other pages are using one type of background (Gradient) while internal pages are using a solid white. Right now I am forced to have two style sheets - main.css for the gradient background, then internal.css for the internal - just for this background div.
Is there a way to use one css file and handle these two background divs easily? I will probably need to use a bit of php...
Essentially I am only trying to pass two different background divs, on either home or some internal pages.
Just use different template files (which you should be doing anyway because of the different looks), and use something like an ID on the body tag to check like this:
<body id="grad">
...
</body>
or
<body id="white">
...
</body>
And use this in your stylesheet:
#grad {
background-image:url(something.png);
}
#white {
background-color:#FFF;
}
Make sure to check out the template hierarchy page in the WordPress codex to see how you can easily create the template files you need. Use #grad in home.php and/or a custom template file that you apply to your front page (if it's static), and then use #while in everything else (category.php, tag.php, single.php, and page.php are probably the basics).
You could use your normal stylsheet on all the pages, with the solid white background set. Then on your front page and other 'special' pages, you could have a tag with the background image that will override the white:
<head>
<link rel="stylesheet" type="text/css" href="main.css" /><!-- This has background-color:white; -->
<?php if(!empty($special)){
echo <<<HTML
<style>
body{
background-color:transparent;
background-image:url('image_url');
}
</style>
HTML;
?>
</head>
Then you'd just set $special to true or something when you're on a 'special' page.
I didn't think of this but here is the code:
<body<?php if ( !is_home() ) echo ' style="background-image: url(images/about_bg.png);"'; ?>>
Put it in the header.
<?php
if(is_home) {
echo '<div class="bg for main page">';
} else {
echo '<div class="bg for internal page">';
}
?>