Add CSS for regular ul / li

[lbeltrame]

Rationale: I want to put a list of publications in the CV (important for academic people). This is currently not possible with most templates (with the exception of readable) because the CSS for lists is used to display items in line, instead of one per line.

Extra CSS (a specific ID, perhaps, like footer already does) would definitely helpon that regard.

[craig-davis]

I can see a use case for this. I like the idea. Do you think it could be done for all of the templates with a new section - # Publications, or do you think we need a separate Academic template?

If I added you as a contributor, would you be comfortable adding it?

[lbeltrame]

done for all of the templates with a new section - # Publications, or do
you think we need a separate Academic template?

My opinion would another section, so that everyone would be fine with it (or
not use it if not needed).

If I added you as a contributor, would you be comfortable adding it?

Depends on what it entails. ;) Although I'm fine with programming (mainly
Python and C++), I hardly know PHP and web-related stuff like CSS.

[craig-davis]

I don't currently have time to devote to this as a feature. If you've got time, fork the project and try adding it. If you've got some success with it, let me know, and I can add you as a contributor and you pull in the changes.

If you've got any questions about adding things, let me know. I did add a 'contributor-wanted' label to this. I think it's a great idea that you've got.

Thanks!

[axelpart]

Hi Craig, I started working on a new template that i would like to add with a future pull request when it is done. Also, in my template i would like to customise a list but i noticed that even if i change the width in my css file the generated html code sets the list width to 33,33%.

Can you briefly explain where to look and avoid this override, or in general how to include my list to be part of the

in html so that i can customise it?

Thank you in advance.

[craig-davis]

Hi @axelpart - many of the templates use list items in a 33% width to create a three column listing section. For instance it's located here in the Swissen template.

I'd welcome a pull request for a template, always nice to see this little project grow!

[axelpart]

Hi @craig-davis . Thank you for the answer. I already noticed that. Firstly, i am trying to customize my resume.css. For example i want to customize my unordered list to have bullets. By default the html file returns with 33% width.

Do i need to work with the pdf.css to achieve what i want?

[craig-davis]

The pdf.css file is only included when it renders the pdf - it allows you to apply some specific rules for printing.

Most of the templates use a list-style: none; for the list elements. You'll need to change that for your specific template.

[jingxuanlim]

Hi @craig-davis and @axelpart, just got started with Markdown Resume today and loving it so far! Adding a list of publications is also a feature I'd like to have! I have zero web development experience but would like to take a stab at this -- customization is my best form of procrastination :)

I made it as far as running md2resume_dev.php in the instructions. What do I do now? Just change the css file? Do I have to compile to the phar file again?

[jingxuanlim]

The pdf.css file is only included when it renders the pdf - it allows you to apply some specific rules for printing.

From the discussion, I gather that pdf.css is for generating the pdf version and resume.css is for generating the html version. What about normalize.css, screen.css and element.less? What do they do? I apologize if this is a stupid question. I have zero experience with css and html but don't mind learning bits and pieces, and help growing the project if possible!

[adilapapaya]

@jingxlim

What about normalize.css, screen.css and element.less? What do they do?

• normalize.css makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing. I like to think of it as 'better default styles'. [External library]
• screen.css contains css for customizing the output to various screen sizes. [Custom to this project]
• element.less has a bunch of useful "mixins": http://lesselements.com [External library]

If you're not familiar with .less files, Less is a CSS pre-processor, meaning that it extends the CSS language, adding features that allow variables, mixins, functions and many other techniques that allow you to make CSS that is more maintainable, themeable and extendable.

If you are interested in css on steroids, take a look at sass as well: http://sass-lang.com

---

(Not sure how much of this overlaps with #52 but let's follow up on the compilation specific stuff in that thread)

[jingxuanlim]

Thanks for describing what the files do @adilapapaya! With no experience with html/css, that was very helpful for my understanding of how the different files come together.

I'm assuming then that the only three files in the entire repo I'll have to touch are screen.css, resume.css and pdf.css if all I'm trying to do is to modifying the existing themes/make new ones?

I also realize that each element (h1, h2, h3 etc) aren't set up identically in resume.css vs pdf.css despite producing html/pdf that essentially look the same. Why is that?

[adilapapaya]

I'm assuming then that the only three files in the entire repo I'll have to touch are screen.css, resume.css and pdf.css if all I'm trying to do is to modifying the existing themes/make new ones?

Correct.

I also realize that each element (h1, h2, h3 etc) aren't set up identically in resume.css vs pdf.css despite producing html/pdf that essentially look the same. Why is that?

pdf.css contains additional styles use in the pdf copy of your resume. So, the relevance is:

• screen.css and resume.css: compulsary for both html and pdf
• pdf.css: styles specific to the pdf version of your resume (irrelevant to the html version).

To understand things a little bit more, you can try renaming pdf.css to something else and seeing what the resulting pdf looks like (spoiler alert: it won't look as good since styles will be optimized for the web view). The resulting html should look the same though.