How to style Directory Listings XAMPP - css

So using XAMPP, it shows a list of folders and files that are hosted locally on my machine. So far, it shows all of these directories in a simple, plain list. What I'd like to do is to be able to use CSS to style it. This may sound confusing so here's some images explaining what I am trying to accomplish.
to...
It is possible to do this because I downloaded a theme for it a while back, I am having trouble trying to find it again so I was windering, if someone out there knows where it is, it would be much appreciated if you would send me the link :)

Here is a tutorial devoted to customizing directory listings:
http://perishablepress.com/better-default-directory-views-with-htaccess/
It shows exact what actions to perform in order to customize it. So shouldn't be too hard to follow.
Sadly, I'm unable to find the style you provided. So I will update this reply in-case I have.
Here are some other nice directory listing styles:
https://github.com/meodai/mod_autoindex.oh
http://adamwhitcroft.com/apaxy/
https://github.com/search?utf8=%E2%9C%93&q=mod_autoindex&type=Repositories&ref=searchresults

You can use the built-in functionality of Apache’s mod_autoindex module to style and enhance your default directory views.
You can go through this link
It has a very detailed description for changing and customizing the views the way you want them to be.
You can customize the icons as well as the css.

Related

Is there an easy way to find a .css source file from a website inspection window?

I'm trying to customize a theme for a Magento 2 website (it was purchased), and for the most part I know where most of the .css calls are coming from. However, there is one sub-menu, I cannot find the source css file for the life of me.
Normally I use Chrome's inspection window to identify the css that is generating the colors/details that I'm looking for, and then search the source files for the same .css reference, and then make the modification as needed.
However, as mentioned I'm struggling to find a specific piece of css code, and I'm wondering if there might be a better way to find what I'm looking for?
http://bricss.net/post/33788072565/using-sass-source-maps-in-webkit-inspector - Try this one!
https://developers.google.com/web/tools/chrome-devtools/javascript/source-maps?utm_source=dcc&utm_medium=redirect&utm_campaign=2016q3 - this is how you set up your css source mapping by using default developer tools :)

Twigmo custom style files

did anyone ever customize the Twigmo addon basic theme for cs-cart? I am trying to write custom css files for font size and color. What I tried:
Using the visual Editor: after working for like 2 hours changing the styles, I tried saving and apparently my current subscription doesn't allow me to do custom files using visual editor
I tried searching for other solutions: fell on this twigmo skin editing which basically tells me to create a custom css file called custom{theme-name}.css. I did but i still can't figure out what classes the twigmo for what. Does anyone know where i can find this? i am also posting a question on the forum to see if they can help me.
Thank-you in advance. hope my question is clear enough.
The free "Starter" Twigmo subscription plan doesn't provide an ability to customize CSS. You have to subscribe for any paid plan. In this case the visual editor will be available for you. Also you will be able to write your custom CSS code in the visual editor.
Regarding your second solution - it is for old version and doesn't work for the Twigmo 3.x.
Hovewer you can modify the design/themes/[your_theme]/templates/addons/twigmo/mobile_index.tpl file. You can add your CSS code there. It is not the most convenient way, but it is free.

Add Image upload interface in wordpress

I'm working on wordpress. And has this kind of requirement, where I need to have an ability in admin panel for administrator wherein he can upload an image. This image will be used at two places in the theme.
I've tried to figure out this, and found that image url can be store in options table and can be used in the theme to retrieve the image.
But not sure how to give an interface for that in admin panel. Any idea to achieve that will be great.
Is it not possible to use the built in Custom Header image system? I don't really know all of your requirements but there is no reason to build something if you can co-opt something instead. :) Granted, it is called a "header" but it really doesn't have to be. Where it shows up depends entirely on the theme. If that doesn't work for you, you've got a considerably more complicated project but you'd probably want a Theme Options page.
Go to your wordpress panel-> plugins:
install plugin named: Custom Upload
Or your can download it from :
http://wordpress.org/extend/plugins/custom-upload/
A simple plugin to upload any type of image in wordpress.
I think you can use it to manage your images of theme.
And that's it, good luck.

How to Incorporate External Design Elements in a WordPress Site

I have lots of fantastic PSD, CSS and HTML design resources from places like CodeCanyon, CoDrops, multiple designer bundles, etc. I'd like to incorporate some of them into a WordPress site, but for the life of me, I can't figure out how to do it and I've looked everywhere I can think of, from CSS-Tricks.com and the Codex to For-Dummies books :)
I'm familiar with HTML, basic CSS and WordPress, but I'm (obviously) not a designer. I do know how to call an external stylesheet using #import or within tags, but how do I pull in the rest of the files?
For instance, I have an item called CSS3Accordion and it contains several index.html files as well as folders containing css, images and javascript. How should I reference them in my theme and where should I put them?
I'm assuming this is a very elementary question (so much so that these awesome design resources don't typically come with a how-to file), so in advance, let me say I sincerely appreciate any help I might get.
Applying a WP template to a WP site and coding one are two very different things. Those resources you are using, are they WP themes? If so, you should be able to install them quite easily using the control panel. If not, it's a completely new horizon. Templates don't function like "normal" html + css, they need much more things (specially, they need to be read by WP and its modules, widgets, etcetera).
I would suggest you start by downloading and installing themes (plenty of tutorials around), and then modifying some of those themes. They usually come with a custom css sheet to add/change styles (use firebug to find them, use !important to overwrite).
I hope this answers your question. If it's only a matter of loading new css, you can still add all of it to the custom sheet. There are also a lot of free plugins (like the accordion) that you can install in WP. Good luck!
I would recommend starting with a basic wordPress theme and incorporate your ideas as you go with some trial and error. WordPress themes are actually pretty straight forward once you spend some time dissecting a basic one. Most of the time I start with a complete design in Photoshop and use that image as a background to layout the sliced graphics over with CSS.
You can place your files anywhere you want, but I normally put them inside the themes folder and reference them with relative file paths, remember though to take the path into account when linking to the files.
I'd also suggest setting up a locally hosted WordPress install to play around with using something like WAMP, MAMP or LAMP. That way you have instant review without having to expose it to the public or uploading files every time you make a change.
Here are a couple of good starting template themes to explore with.
http://digwp.com/2010/02/blank-wordpress-theme/
http://code.google.com/p/wordpress-naked/
Regards and good luck.

How to add and share source code files in a WordPress based site?

I'm planning a personal/portfolio web site based on WordPress. What I would like to have is a list of example webdev projects/plugins/widgets along with the source code available for browsing in the least obtrusive way (if possible to skip downloading, going to another site, etc).
The alternatives:
The simplest:
Upload the code at github, sourceforge, launchpad, google code, or similar.
Share the link to the projects source code in the respective section in my site.
The easiest:
Use an existing WordPress plugin for exposing part of the uploads directory where I can upload the projects' source code.
Use a shortcode/widget/custom page for displaying the tree view with the projects and the source code within a WordPress page(s).
The most realistic:
Write the WordPress plugin from above. From my initial research, there is no such plugin for exposing the uploads directory files in the user and/or admin section of a WordPress site.
From my initial ideas the plugin is basically a file browser with a fancy tree view and a view panel for the source code file contents
(Nice to have) AJAX-ify the plugin to view the source code contents in a DIV with syntax highlighting.
What's your take on this?
Thanks
I think what you list as the simplest option is also probably the best. You have all the tools that people are used to -- syntax coloring, etc. -- and all you have to do is make a comment or two and then link to it. This may sound silly, but there is also a certain gravitas lent to your code because it's not "just on some WordPress site".

Resources