Hello I am using Mercurial for version control of all of my projects.
My projects have a folder structure like this.
www.Project.com
01 – Consultancy(excluded)
02 – Information Architecture
03 – Content
04 – Branding
Fonts (excluded)
Guidelines
Logo
05 – Design
Graphics
Stock Photography
06 – Code WP-Content
Plugins
Themes
07 – Marketing
Email
SEO
Social Media
After finishing the static HTML I like to setup a Wordpress theme. But I don't like to have the whole folder structure in my web directory. Is there a way to push and pull only the plugins and themes folder to Wordpress without the other directory's?
You should use a separate repository for 06 – Code WP-Content. That way you can push it separately. If everything is in one repository you have to push everything.
Thanks for the answer.
I have decided to solve the issue by creating a alias on my websever to the
www.Project.com/06 – Code WP-Content path leaving the rest in tackt
Try using the .hgignore functionality - see here.
Related
I am currently setting up a page and I wonder where the GitHub theme-chooser has gone. According to the following instruction, I want to go through the process:
It seems that the theme-chooser has been removed. I want to use the jekyll-theme minimal (like caroly stransky does).
Is this documentation still correct and is the information still relevant?
update: see here the image of how it looks here
i want to add the line that carol did in the configuration; Christian it would be awesome if you can help here...
second update: hi there - since i cannot see the config.yml i think that i have to add the additional line to the so called raw file: see below the image
can you confirm that is that all right!?
love to hear from you
update3: well i guess that i ll need to create a new file named "_config.yml" and with this i ll ned to set it's contents to this: ´theme: jekyll-theme-minimal`´ I guess that i have to do this
update4: well i ve created the file - and i guess this is done right - but wait. I have to edit this file correctly
theme: jekyll-theme-minimal
Well i need to add this correctly - not as comment but as content of the file... This is pretty important.
The blog post (workwithcarolyn.com/blog/digital-cv-guide) is from 2020. The displayed images are outdated. In a test repo I couldn't find the option to select a theme anymore. The new pages setup page (https://github.com/YOURUSER/REPOSITORY/settings/pages) just contains a link to the docs:
The link to the docs explains how to set a theme for your site. Under point 5 the page says:
Add a new line to the file for the theme name.
To use a supported theme, type theme: THEME-NAME, replacing THEME-NAME with the name of the theme as shown in the README of the theme's repository. For a list of supported themes, see "Supported themes" on the GitHub Pages site.
The supported themes page is linking to the repository of each theme.
Some other themes are remote themes, e.g. Minimal. The repository explains how to add the theme:
To use the Minimal theme:
Add the following to your site's _config.yml:
remote_theme: pages-themes/minimal#v0.2.0
plugins:
- jekyll-remote-theme
You can have a look at https://github.com/cadamini/test/blob/main/_config.yml and the resulting page at https://cadamini.github.io/test/
I am new to website design, sorry if this sounds like a silly question, I am working on a wordpress project where I have 4 pages in my project in total [home, about us, services and contactus]
I have built the home page and contact us page using bootstrap4 and services page using plain HTML and CSS. now i have 2 style.css sheets (style1.css and style2.css) style1 pertaining to bootstrap pages and style2 pertaining to plain HTML CSS. can i combine all these into a wordpress theme?
Combining External CSS files in the WordPress site
One of the easiest ways to do this is to use a free WordPress plugin called Autoptimize, developed by Frank Goossens.
This plugin is pretty lightweight, only 176 KB to be exact. As of writing this, it currently has over 1,000,000 active installs with a 4.7 out of 5-star rating.
STEP 1
You can download it by searching for it within your WordPress dashboard under “Add New” plugins.
STEP 2
Once installed you will want to go into the settings and enable the “Optimize CSS Code” option. This will concatenate (combine) your CSS files. And if you are using a Bootstrap CDN, make sure to input your CDN URL. This way your CSS files will load as one single request on your CDN.
RESULT
After enabling the above settings you will now see your CSS files in one “autoptimize_xxxxx.css” file.
What do you want exactly?
I have a website in Hugo. However I have a peculiar situation.
Scientists and Electrical Engineers and others may have specific needs. For Eg: Having a single page that shows a simulation. Or in my case using webbluetooth and webusb that I have written from scratch in HTML, CSS and JS. Moreover these pages may be generated by custom scripts. So you can have git submodules inside your hugo site that specifically cater to generating these custom, single page html that you just want to add to your website.
So all I want is to have a menu item or sidebar whatever the existing theme supports, but instead of showing the default html, it should show my custom, hard-coded, already ready and prepared html file - which may as well be an index.html file in a folder with all the necessary contents ready and cooked - something like the _site folder that jekyll creates.
What do you mean by custom html?
I mean it doesn't take the formatting of the hugo theme. It has its own formatting, but because its just a single page in the whole website its not fruitful to have its own layout written in Hugo or maybe its just worth the effort to do that cause you already have it working using some other technology.
What have you done so far and what works?
I am actually coming from a Jekyll background where it's as simple as changing the layout frontmatter and making it nil or even something that doesn't exist at all and jekyll does a great job of showing custom HTML in an existing theme. Tried the same with Hugo but that didn't work.
What are you testing on?
hugo-coder and(or) hugo-academic
Any specific requests?
Ideally I would like to have submodules in my hugo site folder where those submodules generate custom html in known folders and then somehow make a corresponding markdown file in Hugo that is responsible for showing the custom html.
I want to avoid writing the whole html in the markdown itself. But if no other solution is possible then I guess I don't have a choice.
Do let me know if its possible and worthwhile to pursue this and any references that might help.
So I don't know if this is the perfect solution but it somehow works for the moment. I will not accept it as its not perfect and I am waiting for some of the more experienced folks to answer.
I got something working by doing the following -
I had a page built using Jekyll. Jekyll builds the site in a folder called _site.
I copied the _site folder into static folder of Hugo and renamed it correspondingly to CustomHTML OR you could use the flag -d <destination folder> or declare it in the _config.yml file : destination: <destination folder>
Since I am testing it on hugo-acdemic theme, for that I added the following to the config.toml file to show it in the menu -
[[menu.main]]
name = "CustomHTML"
url = "CustomHTML/index.html"
weight = 50
hugo serve And it worked.
Cool thing is that I didn't have to bother about CSS and anything else. Hugo rendered the index.html in _site properly.
EDIT
Looks like the Hugo folks also suggest doing the same way.
I would like to have a "Recent Activity" stream on the left side of my index.html file. I have the following code:
<div id="sidebar">
<div class="box1">
<div class="title">
<h2>Recent</h2>
</div>
<ul class="style2">
<li>27 Aug - Conference Meeting</li>
<li>26 Aug - Website Created</li>
</ul>
</div>
</div>
And basically I'd like to be able to store the contents (the activities) in a seperate file, so that I can import that file into the various pages across my website.
I'm very new to CSS and webdesign and I've tried to find the answer on google, but haven't run into any luck. I've been tasked with creating a website for my team's college project.
Thanks for the help in advance.
In order to do this, you can use CSS like this:
.box1{content: url(http://www.example.com/test.html)}
see more at Mozilla Dev
This being said, I highly advise NOT to do it this way. This is NOT what CSS is intended for. You better use some kind of include like Server Side or PHP. If you don't know coding, you can always use a CMS like WordPress which will make this kind of task a breeze
You can use Javascript (or some library of same) to read in the file w/ the activities (or, if represented using javascript, could just import that file) and then use javascript to insert the activities into the appropriate part of the DOM.
The solution is not stripping out html from an existing file but to build up your html files from different sources using a server sided script language like php.
With php you would have just one page (for example index.php) and include the content the user requests (like home, contact, guestbook, whatever).
The proper way would be to use a database for storing the information but this is far too difficult for begining with web development.
Save the html for the sidebar to a separate html file (sidebar.html). Rename your index.html to index.php.
Go to the location in index.php where your html code for the sidebar is and delete it and instead just insert this:
<?php include "sidebar.html"; ?>
This code includes your html file inside your index.php and your can reuse it on different pages by just including the same sidebar.html on every page where you need it.
The benefit is to be able to modify it in just one file if you need to make changes.
Now here is the disadvantage in this solution: You need php installed on the server your website will be hostet. Php is a program which interacts with the webserver and everytime a .php file is requested by a browser it will be handed over to php first for parsing the file and doing the includes, database access and many other cool things. So in order to use php-files and include html files within other html files you need php installed on your webserver. Also if you open your .html file by double clicking you won't be able to see the complete result unless you have a local webserver with php installed on your computer. That's all free software (apache2 and php) but for a beginner it's not so easy to install it. Maybe start with a prebuild package like xampp. (This contains the webserver and php with preconfigured settings to start quickly).
This topic is pretty basic for php so you will be able to find lots of tutorials on the internet about getting started with php. Good luck and have fun. ;)
In simple words, you can do it with <iframe> tag or with the css Content property but it won't give you possibilities as what JavaScript or PHP can give you.
To do it with JavaScript you can view this question .
Thank you everyone for your help and assistance. This has been a learning experience. For anyone who has the same issue, here is the solution that I've found using some help from the members who kindly responded to my question.
Here is my css:
<div id="sidebar">
<div class="box1">
<div class="title">
<h2>Recent</h2>
</div>
<script type="text/javascript" src="js/recent.js"> </script>
</div>
<div class="box2">
<div class="title">
<h2>Relevant Links</h2>
</div>
<script type="text/javascript" src="js/links.js"> </script>
</div>
</div>
And here are my two *.js files:
// recent.js - Create recent activity feed
document.write("<ul class=\"style2\">");
document.write("<li>29 Aug - 10 Photos Added</li>");
document.write("<li>28 Aug - Meeting Page Added</li>");
document.write("<li>27 Aug - Meeting</li>");
document.write("<li>26 Aug - Website Created</li>");
document.write("</ul>");
// links.js - Create list of links
document.write("<ul class=\"style2\">");
document.write("<li>Formula SAE®</li>");
document.write("<li>SAE International</li>");
document.write("</ul>");
It may not be the prettiest way to do it, but it seems to work. The problem with the iframes was that if I clicked on a link, it opened it within the iframe. Thanks again everyone! I knew nothing about javascript, css, and it's been a learning experience! :)
I'm assuming this is an easy question, but I'll be darned if I can find the answer.
I have a website in Visual Studio 2008. The paths to the stylesheets (and images) are in the following format /css/stylesheetname.css
At the root of the web project in Visual studio the folder exists as does the stylesheet. These paths work fine when running it in IIS.
If I use the inbuilt webserver in Visual Studio the paths fail because it puts the projectname in the path i.e. http://localhost:2020/projectname/default.aspx
In this case the / takes the path right back to http://localhost:2020
This is further compounded by the fact that if you click "design" the styles that import background images all fail although the stylesheet is imported correctly (becuase all other aspects of the stylesheet work i.e. .class{font-family:arial;} works but .class{background: url(/images/image.jpg)} does not).
I guess it's all to do with how Visual studio calculates its root path for the website, however I can't find a setting to change this.
Any ideas??
Update: as per Egil Hansen's answer I converted the paths in the CSS file to relative paths. However the background images still do not display in Design mode. I'll take a look at using Themes to get round this in due course.
I think the correct solution is to use relative urls in the style sheet instead of absolute urls as you use now.
Do note that relative urls in style sheets are relative to the location of the style sheet, not the current page being view by the browser.
If you use ASP.NET Themes, you can put all your website graphics in a /App_Themes/YourTheme/Images/ folder, and put your style sheet in the /App_Themes/YourTheme/ folder.
In your style sheet, you can then simply reference an image with url(Images/img.gif), and it will work both online and in development.
The you just need to assign your ASP.NET Theme to the page(s) you want, either through web.config's Pages section (<pages styleSheetTheme="Default">) that will assign a theme to all pages on the website or through the <%# Page ... directive on each page.
In general, you can do some really neat things with ASP.NET Themes and Skins, just take a look at the ASP.NET Themes and Skins Overview over at msdn.microsoft.com.
There are a few issues to be aware of with Themes in ASP.NET, take a look at my post How to take control of style sheets in ASP.NET Themes with the StylePlaceHolder and Style control, which explains and solves the issues I have come across so far.
I have been running projects using the custom Image folder for all my graphics for ASP.Net applications. While there have been advancement in this regard with the App_Theme and App_Code folder(s) available in the progressive VS IDE; I still kept my folder and it has not disapponited when deploying it on the server.
So with that said - the proverbial folder will be sitting with all the bin, App_Code and _Themes and the reference to it is made through this way
background: url(../image/..);
of course the code above sitting in the CSS file. It works for me all the time
not sure if this works for VS 2008 or not, but im using visual web developer 2010 and it worked for me:
1) click on the project in the solution explorer
2) it shows a "Virtual Path" property which is defaulted to "/projectname"
3) change it to "/" instead and it seems to do what is desired
let me know if this works for you!
it has been ages since I did anything in css, but maybe url(./images/image.jpg)
will work?
Edit:
Or rather ~/format /css/stylesheetname.css or ./format /css/stylesheetname.css as the url to the stylesheet.
I had the same issue and it drove me crazy. Solution is to add an Apps_Theme folder and copy the images into there. When you publish the site the folder structure is preserved and the imnges display.
I had set path css url image by
code { background:url(/images/xxx.jpg) no-repeat; }
and running file at IIS, so must to point default website to your project
how to running testing preview
type:
http://localhost/default.aspx
this is correct path same running on server
include file js or css can use "/" root path
cheers
Noboyband