layout errors building github personal site with jekyll - github

I have been trying to put together my own page at meredithhu.github.io. As you can see, at this point, only the Home page is displaying the correct layout, all other pages' (if you click through the tabs on home page) layouts are off... And I couldn't figure out why and how to fix it...
All the codes are here: https://github.com/meredithhu/meredithhu.github.io.
I defined layouts in the _layouts folder, apparently only the default.html is working... but aren't all others defined the same way? how could none of the other ones work?
Could anyone give me some hints how to fix the problem?

Update your link tag from default layout
<link rel="stylesheet" type="text/css" href="css/main.css">
to this ->
<link rel="stylesheet" href="/css/main.css">

There is a problem with the styles loading, if you just use href="css/main.css" then the browser will use the current level as the base URL, this is why it works for the base url, but not for any other deeper category/page, in _layouts/default.html change the CSS line to:
<link rel="stylesheet" type="text/css" href="{{site.baseurl}}/css/main.css">
Also, in _config.yml, there is a wrong parser, remove the line markdown: shengli so the website loads properly.

Related

Ag-grid style sheet file is loaded but does not work

I used ag-grid a few times before and each time it works with no probs, but now for no reason the css is not working I use these links for css :
<link rel="stylesheet" href="https://unpkg.com/ag-grid-community/dist/styles/ag-grid.css">
<link rel="stylesheet" href="https://unpkg.com/ag-grid-community/dist/styles/ag-themealpine.css">
I didn't get any error on my page and the links are valid.
The css file was loaded on my page and I can see it using F12.
What should I check next ? how can I solve it ?
You are missing the - between theme and alpine in ag-themealpine.cssin the second link tag.
Replace that link tag with the following:
<link rel="stylesheet" href="https://unpkg.com/ag-grid-community/dist/styles/ag-theme-alpine.css" />
See this implemented in the following plunkr.

favicon works only on homepage but not on other pages

I have uploaded favicon.png to my Wordress 3.9.1 website: www.belldex.com and it works well. I have already placed the favicon in other folders such as the theme's folder.
However, it only works on the homepage and not on any other page.
Appreciate being pointed to the right direction.
If you are using something like this inside your head tag
AND If Homepage is on a different Domain/Subdomain than other pages: you will need to repeat
PS: .PNG is not as ideal as .ico, so I'd convert your image first, an in the case above, save in on the same level as your html pages.
Your head tag contains two links to favicons, and the second one doesn't work:
<link rel="shortcut icon" href="http://www.belldex.com/favicon.png" type="image/x-icon"/>
<link rel="shortcut icon" href="http://www.belldex.com/wp-content/themes/smartit/favicon.png" type="image/x-icon" />
You should delete the second one.

Open login for inside modal dialog for Joomla 2.5

So I have a specific page that spawns a modal dialog to login/register. I am using Colorbox, and this is working nicely for me. What I need to do is open ONLY the form and not the entire page with header links and such. I understand this can be fixed by adding '?tmpl=component' or '&tmpl=component' to the end of the url. My problem is that my form is stripped of all styling and is terribly ugly. Is there any way I can go about adding styling back to this form? Thanks in advance.
Yes you can get all styles,
This is happen due to using with tmpl=component Normally Joomla using this layout for printing purpose(Print layout) it have only basic styling compared to your default template index.php.
So you need to get your proper styling for the forms you have to add those style sheet to the component.php inside your template folder.
templates/your_template/component.php
Add your basic template style sheet at the top of the file using same like index.php.
eg:
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/beez_20/css/template.css" type="text/css" />
Then tmpl=component view have proper styles applied.
Hope it helps..
I downloaded the entire FTP and did a search for where the basic stylesheets were being included (general.css and system.css) so that I could add my others for style. This can be found/edited in public_html/templates/system/component.php

route url breaks page layout MVC 2

I have a page which corresponds to the route:
routes.MapRoute("Claims", "{controller}/{action}/{id}/{year}/{divid}");
However, when it displays it breaks the layout of the master page it's attached to. I have tried to empty the page, the master page layout is still deformed.
For your information: I have noticed that references to static files are represented in the view source of the defective page as:
href="../../../../Content/site.css"
Where as in the normal ( correctly displayed ) pages they are represented as:
href="../Content/site.css"
Any help Please, ASAP.
It sounds like you're using some sort of server side relative markup for these, thus when you're further in the site it tries to append more ../
I would use just a static line of HTML for these. There's rarely a reason to have css and javascript in deeper folders in your site (especially as with MVC there aren't "folders" representing these urls anyway) so just put:
<link rel="stylesheet" type="text/css" href="/content/site.css" />
If you can, I would use the url helper in its place....
For WebForms View:
<link rel="stylesheet" type="text/css" href='<%: Url.Content("~/Content/site.css") %>' />
For Razor View:
<link rel="stylesheet" type="text/css" href='#Url.Content("~/Content/site.css")' />

Does favicon.ico need to reside in that same directory of index.html?

I am already using the standard way of adding a favicon:
<link rel="icon" type="image/gif" href="/graphics_card/favicon.gif">
<link rel="shortcut icon" href="/graphics_card/favicon.ico">
so the favicon.gif and .ico are both supposed to reside on
/graphics_card
However, I found that IE 8 (or maybe other IE) cannot show it, (update: no matter how many times I pressed CTRL-F5, or clear the browser cache), but as soon as the .ico file is present in that directory where the index.html is, then it will show.
So if it is
http://www.example.com/graphics_card/nvidia/index.html
there needs to be a favicon.ico in
/graphics_card/nvidia/
too. I ended up specifying it as
<link rel="icon" type="image/gif" href="/graphics_card/favicon.gif">
<link rel="shortcut icon" href="favicon.ico">
and just put a favicon.ico in that directory. Is this the standard way?
No, you can put it anywhere if you specify it in the tag. However, for IE, you need to give a fully qualified URL (i.e. not a relative url).
You can put it anywhere else and use the <link> tag to refer to it. e.g.
<link rel='shortcut icon' href='/images/favicon.ico' type='image/x-icon' />
However it is good practice to put it on the domain root e.g. http://example.com/favicon.ico, because modern browsers will actually do a call to that file when loading pages to load the icon first.