Title: PDF Files
Last modified: August 20, 2016
---
# PDF Files
* [Casterina](https://wordpress.org/support/users/casterina/)
* (@casterina)
* [13 years, 11 months ago](https://wordpress.org/support/topic/pdf-files-1/)
* How do I create PDF menus setup like this?
* > [View post on imgur.com](https://imgur.com/biJsU)
Viewing 15 replies - 1 through 15 (of 37 total)
1 [2](https://wordpress.org/support/topic/pdf-files-1/page/2/?output_format=md)
[3](https://wordpress.org/support/topic/pdf-files-1/page/3/?output_format=md) [→](https://wordpress.org/support/topic/pdf-files-1/page/2/?output_format=md)
* [Riversatile](https://wordpress.org/support/users/riversatile/)
* (@riversatile)
* [13 years, 11 months ago](https://wordpress.org/support/topic/pdf-files-1/#post-2818871)
* What do you want to do ?
Just display PDF icon with a link ?
* Moderator [cubecolour](https://wordpress.org/support/users/numeeja/)
* (@numeeja)
* [13 years, 11 months ago](https://wordpress.org/support/topic/pdf-files-1/#post-2818877)
* Upload each pdf using the media uploader & create a link to it.
* Use ftp to upload a graphic for your pdf icon to your theme images folder. e.
g. a graphic 32px square called **pdf.png**
* Add some css to your stylesheet to make the icon appear next to each pdf link.
* Start with something like the following & edit to tweak the position of the icon:
* ```
a[href$=".pdf"]{
background: url(images/pdf.png) no-repeat scroll left center;
padding: 10px 0 10px 40px;
}
```
* Thread Starter [Casterina](https://wordpress.org/support/users/casterina/)
* (@casterina)
* [13 years, 11 months ago](https://wordpress.org/support/topic/pdf-files-1/#post-2818878)
* How do I get the exact menu style like this?
* [http://tinyurl.com/d6t833g](http://tinyurl.com/d6t833g)
* Thread Starter [Casterina](https://wordpress.org/support/users/casterina/)
* (@casterina)
* [13 years, 11 months ago](https://wordpress.org/support/topic/pdf-files-1/#post-2818884)
* Anyone know how to?
* [esmi](https://wordpress.org/support/users/esmi/)
* (@esmi)
* [13 years, 11 months ago](https://wordpress.org/support/topic/pdf-files-1/#post-2818887)
* I’m sorry but it is beyond the scope of these forums to deal with basic CSS issues.
Try a dedicated CSS resource such as [http://www.css-discuss.org/](http://www.css-discuss.org/)
instead. In the meantime, using Firefox with the Firebug add-on for this kind
of CSS work.
[http://getfirebug.com/](http://getfirebug.com/)
* Thread Starter [Casterina](https://wordpress.org/support/users/casterina/)
* (@casterina)
* [13 years, 11 months ago](https://wordpress.org/support/topic/pdf-files-1/#post-2819040)
* I’m trying to use this design on my website menu,
* [http://i2.lulzimg.com/99befe5e0f.png](http://i2.lulzimg.com/99befe5e0f.png)
* I used FireBug to find out the code, this is the code,
* ```
```
* Where do I put the Menu Bar image and the PDF file in the code above?
* Also how do I make it so there’s one on the left and one on the right?
* [WPyogi](https://wordpress.org/support/users/wpyogi/)
* (@wpyogi)
* [13 years, 11 months ago](https://wordpress.org/support/topic/pdf-files-1/#post-2819041)
* Images and PDF files (which you need to create and add) would likely go in the
uploads folder — just change the names and links accordingly.
* The side-by-side can be done using CSS probably using float positioning — see
this:
* [http://www.w3schools.com/css/css_float.asp](http://www.w3schools.com/css/css_float.asp)
* Thread Starter [Casterina](https://wordpress.org/support/users/casterina/)
* (@casterina)
* [13 years, 11 months ago](https://wordpress.org/support/topic/pdf-files-1/#post-2819042)
* ```
```
* So in this code, I change it to my Menu Bar image and PDF link?
* **menus/Chinese2.pdf**
* [WPyogi](https://wordpress.org/support/users/wpyogi/)
* (@wpyogi)
* [13 years, 11 months ago](https://wordpress.org/support/topic/pdf-files-1/#post-2819043)
* That is the path file and name — so yes, change accordingly.
* Thread Starter [Casterina](https://wordpress.org/support/users/casterina/)
* (@casterina)
* [13 years, 11 months ago](https://wordpress.org/support/topic/pdf-files-1/#post-2819044)
* Do I provide the filename or the file link?
* [WPyogi](https://wordpress.org/support/users/wpyogi/)
* (@wpyogi)
* [13 years, 11 months ago](https://wordpress.org/support/topic/pdf-files-1/#post-2819046)
* I’m really not understanding what you are asking.
* In this
* > menus/Chinese2.pdf
* “menus” is the name of a folder on the server where the pdf file is located.
* “Chinese2.pdf” is the name of the file being linked to.
* This site has a lot of great information about basic HTML — which would probably
be helpful to you:
* [http://www.w3schools.com/html/default.asp](http://www.w3schools.com/html/default.asp)
* Thread Starter [Casterina](https://wordpress.org/support/users/casterina/)
* (@casterina)
* [13 years, 11 months ago](https://wordpress.org/support/topic/pdf-files-1/#post-2819048)
* This is what I meant by the Menu Bar logo,
* > [View post on imgur.com](https://imgur.com/zQOOP)
* The text will be on the right hand corner
* [http://i2.lulzimg.com/99befe5e0f.png](http://i2.lulzimg.com/99befe5e0f.png)
* So how do I use the Menu Bar logo at the back?
* [WPyogi](https://wordpress.org/support/users/wpyogi/)
* (@wpyogi)
* [13 years, 11 months ago](https://wordpress.org/support/topic/pdf-files-1/#post-2819049)
* In that site you linked to, the image is a background image (set in CSS) with
clickable text on top of it.
* See the W3C CSS page linked to above for how to do that with CSS.
* BTW, where did you get the image?
* Thread Starter [Casterina](https://wordpress.org/support/users/casterina/)
* (@casterina)
* [13 years, 11 months ago](https://wordpress.org/support/topic/pdf-files-1/#post-2819077)
* I’m using CSS background but where should I put the image URL link in this code?
* `body {background-image:url('paper.gif');}`
* [WPyogi](https://wordpress.org/support/users/wpyogi/)
* (@wpyogi)
* [13 years, 11 months ago](https://wordpress.org/support/topic/pdf-files-1/#post-2819079)
* Why are you using the body tag? If you want that image as a background in an
element on the page, it has to go in a div in the page content. So you might
have something like this:
* ```
```
* Then the CSS might look like this:
* ```
.menu_pdf_styles {
background-image: url('filefolder/filename.gif');
you might have other CSS styles here;
}
```
* You would then use a unique id for each of the divs (I used menu1 as the first
example one) — to position each of the divs on the page using CSS for each ID.
Viewing 15 replies - 1 through 15 (of 37 total)
1 [2](https://wordpress.org/support/topic/pdf-files-1/page/2/?output_format=md)
[3](https://wordpress.org/support/topic/pdf-files-1/page/3/?output_format=md) [→](https://wordpress.org/support/topic/pdf-files-1/page/2/?output_format=md)
The topic ‘PDF Files’ is closed to new replies.
* In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
* 37 replies
* 6 participants
* Last reply from: [Casterina](https://wordpress.org/support/users/casterina/)
* Last activity: [13 years, 10 months ago](https://wordpress.org/support/topic/pdf-files-1/page/3/#post-2819134)
* Status: not resolved
## Topics
### Topics with no replies
### Non-support topics
### Resolved topics
### Unresolved topics
### All topics