I have the following code:
<link href="{{ app.request.basepath }}/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
Currently, php cannot find bootstrap.min.css as the location is web relative, not template location relative.
What do i add to my twig template or phpstorm to get phpstorm to understand that my basepath is '../../web/' ?
PHPStorm's asset path and name completion works relative to the directories marked as resource root. You can also select these while creating the project, of afterwards like this:
on the left (the project panel) rightclick on the web dir
select mark directory as -> resource root
Related
Hey guys i am trying to build a comment system project with Nodejs . At a certain place i want to use Font Awesome icons in my project so i tries 2 ways but failed to render thoses icons
First
inclucing
<link href="https://stackpath.bootstrapcdn.com/.../font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
crossorigin="anonymous">
inside my head tag in ejs file
and then
Second
Download this zip file https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself
and open the CSS folder inside and drag the all.min.css file into your public directory in your project.
and then Use a link tag to reference it in your templates/HTML, e.g:
and
Both the ways failed, am i missing something ?
Since you are using the font-awesome solid styles with the fas class, you'll have to include the solid.css styles.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/solid.min.css">
Good Day!
I am making an app and in it I have various routes. I am using node.js. I have created a "partials" directory with header.ejs and footer.ejs files that contain all the header and footer info such as bootstrap, custom css etc.
Now, this header file works fine, it is also linked correctly, I have tested it by changing the background color to complete red and this color then applies to all the pages that contain <% include header.ejs %> and <% include footer.ejs %>.
In my project, the problem is that the bootstrap and other custom css only work for the root route. For example this is the main directory (Project), this directory contains (Project/app.js, Project/package.json, Project/views, Project/public, and so on...). Project/views contains ejs files for all the routes. For example toyota.ejs file for route "/cars/toyota", honda.ejs file for route "/cars/honda" and so on. All these ejs files are stored in Project/views folder. In the main directory, along with app.js, there is a landing page called "landing.ejs" for route "/cars". The header and footer work absolutely fine for the route "/cars" which renders "landing.ejs" but when I go to different routes such as "/cars/toyota", which will render "toyota.ejs" from views folder, the header and footer stop working, only certain features work such as bootstrap button or certain custom styles.
What I mean is that header.ejs and footer.ejs only works for root route, which is "/", and the main cars route "/cars", which shows all car manufacturing companies. The problems arises only when I try try to use routes that render files from the "Project/views" folder. header.ejs and footer.ejs properties does not get applied to the files contained in the nested folder, which is called "views". Linking is working fine because I have tried changing background colors.
Can you post your code to here?
You can try this:
<%- include('filepath/header.ejs') %>
In your header.ejs file, put a "/" before your css filename in href.
For example, replace:
<link rel="stylesheet" type="text/css" href="car.css">.
with:
<link rel="stylesheet" type="text/css" href="/car.css">.
I got a similar error but my code worked two ways, either by using
<%- include("partials/header"); -%>
or by,
<%- include partials/footer.ejs-%>
also, take care of the spaces in between.
In this example, I am considering that the partials folder in the same directory, update path as per the requirements.
Happy Coding :)
I have made a Hexo blog. I can't however find out where to add the favicon. I have tried adding it to different folders but it isn't being found.
Does anyone know where it should be added or if there is anything else I need to update.
It depends on theme you're using, check theme documentation and source.
Some themes, like apollo are supports favicon config parameter (theme_config.favicon parameter in_config.yml).
If theme does not support a custom favicon, then just add file source/favicon.ico and it will be requested by browser automatically.
I use Landscape, the default theme at time of writing.
blog\blog\node_modules\hexo\node_modules\hexo-cli\assets\themes\landscape\_config.yml
At the bottom of the file, you'll find a section titled Miscellaneous.
# Miscellaneous
google_analytics:
favicon: blog\themes\landscape\source\css\images\favicon.ico
twitter:
google_plus:
fb_admins:
fb_app_id:
Windows can be directionally-challenged when it comes to slashes, so try the opposite direction if you use PC. This took some fudging on my part, and I was able to use an .ico file as well as a .png.
If you're still in need of a placeholder image, I've used Favicon.cc and had great results.
you can add the favicon.ico in the source floder, and add a line in the blog/_config.yml
favicon: favicon.ico
so, you know the source is the root path
I think all the other answers are so confused.
Now just three steps to add a favicon to your hexo-blog website, and I take next theme as example:
First, download your favorite imagename.ico image file from network or you make one by yourself.
Second, rename the imagename.ico file to favicon.ico, then move it to that folder: blog/themes/next(the theme folder you are using now)/source/images/.
Finally, modify the code in file blog/themes/next/_config.yml at that line to the same as below:
# Put your favicon.ico into `hexo-site/source/` directory.
favicon: images/favicon.ico
Done!
Konstantin Pavlov is right.
for example, I use hexo-theme-next theme.
I change code in themes/next/_config.yml.
# Put your favicon.ico into `hexo-site/source/` directory.
favicon: images/favicon.ico
I put my favicon.ico in themes/next/source/images/favicon.ico
well Done.
Add this to the head part of the html code...
<head>
<title>Test Page</title>
<link rel="icon" type="image/png" href="http://www.w3.org/Icons/w3c_home">
</head>
For more on this have a look at the W3C site : How To FavIcon
It's also good to inspect the page source by looking at the console as it will report if there were any issue retrieving the icon.
I tried to change the application icon but it only works with the desktop version , when i convert to web the icon didn't display correctly , only blank page icon displayed.
Unfortunately, the Lightswitch team has apparently not thought of this... at least since Visual Studio 2012.
It is a manual process, so each time you publish you will have to put this in the default.htm file located in the main directory
<head>
...
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
...
</head>
Where favicon.ico is the URL of somewhere on the server/computer.
This line is to be placed within the head tags.
It can't be done through Visual Studio. It is a manual process. For the highest compatibility, you need to create an image that is 16 x 16 pixels in a .ico format and name it favicon.ico. You will then need to place it in the root directory of your website which should be located at C:\inetpub\wwwroot\MyWebApp.
For more information on favicons, see the Wikipedia article.
So basically I am using a drupal multi-site.
Structure is as follows:
mywebsite.com:
-- public_html/sites/default/
sub.mywebsite.com: -- public_html/sites/sub.mywebsite.com/
Works just fine(via settings.php), but the problem comes when theming. In order to reference valid image files, I must use drupal_get_path('theme','mythemefolder')
And due to having "pretty urls" activated, I must use the following code to reference the image files:
$uri=$_SERVER["REQUEST_URI"];
$path=drupal_get_path('theme','mythemefolder')."/";
$real_prefix=$base_path; // global from drupal, equates to "/" as drupal resides in public_html folder.
$count=substr_count($uri,"/");
for ($i=0;$i<$count;$i++) $real_prefix.="../";
In this way, I can do the following:
<script type="text/css">
#borderclass {
background-image: url('<?= $real_prefix.$path.'images/a_border_image.png'; ?>');
background-repeat: repeat-x;
vertical-align: top;
}
</script>
<div class="borderclass" width="10px" height="10px"><!-- my image border div --></div>
It would be much preferable to not have to do this. And just simply reference the local site folder...
So that instead, I could write via PHP referenced above:
<div style="background-image: url('<?= $path ?>images/a_border_image.png');"></div>
The resulting html should instead appear inside View Source, as:
<div style="background-image: url('themes/mythemefolder/images/a_border_image.png');"></div>
and Not:
<div style="background-image: url('sites/sub.mywebsite.com/themes/mythemefolder/images/a_border_image.png');"></div>
Is it possible to configure my server to do such a thing? Basically, I'd rather not have my clients even know that the "sites" directory exists on the server when using their own domain or subdomain. Let alone the above presented theming issue.
From what I understand what you are trying to understand, let me tell you that this is not how you usually deal with things.
A module does not need to look at the theme (except template files) folder to get anything.
Logo, headers and other theme-related stuff can be stored in a theme's subfolder named "images" or anything else.
A theme folder will contain all template files (page template, html template, node template, etc) but a variable is ready for you if you want to get the theme's path.
url() in css, if the style is in a file, will be relative to the css file - not the current page.
So that's where you can enter url('images/a_border_image.png') so it will be relative to the theme folder regardless of the theme's location. Browser is aware that the css file's location is sites/sub.mywebsite.com/themes/mythemefolder and your url() stuff in css will be relative to that folder.
However, in case you want to get the correct path (easily), do this:
<?php
$theme_path = drupal_get_path('theme','mythemefolder').'/';
$real_path = url($theme_path . 'images/images/a_border_image.png'); // 'sites/sub.mywebsite.com/themes/mythemefolder/images/a_border_image.png'
?>
url() will handle base path and all the substr stuff for you.